Php 多个表单，无需重新加载页面

我正在使用php。每次用户发送匹配结果时，我都需要向服务器发送帖子，而不需要重新加载页面

我一直在尝试jquery，但我不能

这是我的表格：

<?php

$sqlpartidos =mysqli_query($con, "SELECT * FROM partidoprode WHERE idfecha = '$idfecha';");

while($filapartidos = mysqli_fetch_array($sqlpartidos)){

  echo '<div class="list-group-item list-group-item-action flex-column ">
  <div>

    <div class="row justify-content-center">

      <div class="col-3" id="bloqueequipo">
      <div><h5 class="nombreequipos">'.$filapartidos['nombrelocal']. ' '.' </div><div><img src="'.$filapartidos['imglocal'].'" alt="" class="imgequipos"></h5></div> 
      </div>
      <div class="col-6" id="bloqueequipo"><form id="myForm" method="post"><input type="number" id="reslocal" name="reslocal" min="0" max="10" size="1"/> - <input type="number" id="resvisitante" name="resvisitante" min="0" max="10" size="1"/><input type="hidden" name="idpartido" id="idpartido" value="'.$filapartidos['id'].'"/><input type="hidden" name="idfecha" id="idfecha" value="'.$filapartidos['idfecha'].'"/><div id="botondiv"><input type="submit" value="Submit" /></div></form> <div id="results"></div></div>
      <div class="col-3" id="bloqueequipo">
      <div><h5 class="nombreequipos">'.$filapartidos['nombrevisitante']. ' '.' </div><div><img src="'.$filapartidos['imgvisitante'].'" alt="" class="imgequipos"></h5></div> 
      </div>

    </div> 

  </div>
  <div class="col-12 text-muted nombreequipos"><small>'.$filapartidos['fecha'].'</small></div>

  </div>';
}
  ?>

以及输入

<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />

---

上面的代码非常凌乱，错误百出（正确缩进代码将极大地帮助您！），但下面的方法可能会有所帮助

如果您使用

printf

或

sprintf

等，您可以创建外观非常干净的标记，其中包含插入变量的占位符，这使得imo更易于阅读。删除循环中生成的所有ID属性-您通常不需要它们，因为您可以使用

查询选择器

和同级选择器。通过这种方式，您可以捕获提交按钮的（节点）列表，并远程分配事件处理程序，而不是

inline

正如我所说，原始的标记是混乱的，因此下面的内容可能不符合您的原始意图

while( $filapartidos = mysqli_fetch_array( $sqlpartidos ) ){

    printf('
    <div class="list-group-item list-group-item-action flex-column">
        <div>
            <div class="row justify-content-center">

                <div class="col-3 bloqueequipo">
                    <div>
                        <h5 class="nombreequipos">%s</h5>
                        <img src="%s" alt="" class="imgequipos" />
                    </div>
                </div>

                <div class="col-6 bloqueequipo">
                    <form method="post">
                        <input type="number" name="reslocal" min="0" max="10" size="1" /> - 
                        <input type="number" name="resvisitante" min="0" max="10" size="1" />
                        <input type="hidden" name="idpartido" value="%s" />
                        <input type="hidden" name="idfecha" value="%s" />
                        <div class="botondiv">
                            <input type="submit" />
                        </div>
                    </form>
                    <div data-id="results"></div>
                </div>

                <div class="col-3 bloqueequipo">
                    <div>
                        <h5 class="nombreequipos">%s</h5>
                        <img src="%s" alt="" class="imgequipos" />
                    </div>
                </div>

                <div class="col-12 text-muted nombreequipos">
                    <small>%s</small>
                </div>

            </div>
        </div>
    </div>',

        /* assign the variables / data to the placeholders */
        $filapartidos['nombrelocal'],
        $filapartidos['imglocal'],
        $filapartidos['id'],
        $filapartidos['idfecha'],
        $filapartidos['nombrevisitante'],
        $filapartidos['imgvisitante'],
        $filapartidos['fecha']

    );//end printf

}//end while loop

<script>
    const ajax=function(url,data,callback){
        let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(e){
                if( this.status==200 && this.readySate==4 )callback( this.response );
            }
            xhr.open( 'POST', url, true );
            xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
            xhr.send( data )
    }

    Array.prototype.slice.call( document.querySelectorAll( 'form > div > input[type="submit"]' ) ).forEach( bttn=>{
        bttn.addEventListener('click',function(e){
            e.preventDefault();
            let fd=new FormData( e.target.parentNode.parentNode );
            let results=e.target.parentNode.parentNode.parentNode.querySelector('[data-id]');
            ajax( location.href, fd, function(r){
                alert(r);
                results.innerText=r
            });
        });
    });
</script>

while（$filapartidos=mysqli\u fetch\u数组（$sqlpartidos））{
printf（'
%
- 
%
%
',
/*将变量/数据分配给占位符*/
$filapartidos['nombrelocal']，
$filapartidos['imglocal']，
$filapartidos['id']，
$filapartidos['idfecha']，
$filapartidos['nombrevisitante']，
$filapartidos['imgvisitante']，
$filapartidos['fecha']
)；//结束printf
}//边结束边循环
const ajax=函数（url、数据、回调）{
设xhr=newXMLHttpRequest（）；
xhr.onreadystatechange=函数（e）{
if（this.status==200&&this.readySate==4）回调（this.response）；
}
xhr.open（'POST'，url，true）；
setRequestHeader（'X-request-With'，'XMLHttpRequest'）；
发送（数据）
}
Array.prototype.slice.call（document.queryselectoral（'form>div>input[type=“submit”]）.forEach（bttn=>{
bttn.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
设fd=newformdata（e.target.parentNode.parentNode）；
让结果=e.target.parentNode.parentNode.parentNode.querySelector（“[data id]”）；
ajax（location.href、fd、function（r）{
警报（r）；
results.innerText=r
});
});
});

使用JQuery时遇到了什么问题？向我们展示您的尝试。每个表单如果要有ID，必须有唯一的ID。我认为您最好删除ID。这同样适用于循环中声明的具有ID的其他元素-它们必须是唯一的。由于元素跨度不正确的性质，HTMl也是无效的。在hte

h5

tage中，有一个关闭的

div

，没有相应的开始标记。@KIKOSoftware edited。这样他只给我发第一场比赛的数据，你没有说你遇到了什么问题。这很难猜测。如果您的表单提交，并且您希望防止此情况发生，则需要使用：

while( $filapartidos = mysqli_fetch_array( $sqlpartidos ) ){

    printf('
    <div class="list-group-item list-group-item-action flex-column">
        <div>
            <div class="row justify-content-center">

                <div class="col-3 bloqueequipo">
                    <div>
                        <h5 class="nombreequipos">%s</h5>
                        <img src="%s" alt="" class="imgequipos" />
                    </div>
                </div>

                <div class="col-6 bloqueequipo">
                    <form method="post">
                        <input type="number" name="reslocal" min="0" max="10" size="1" /> - 
                        <input type="number" name="resvisitante" min="0" max="10" size="1" />
                        <input type="hidden" name="idpartido" value="%s" />
                        <input type="hidden" name="idfecha" value="%s" />
                        <div class="botondiv">
                            <input type="submit" />
                        </div>
                    </form>
                    <div data-id="results"></div>
                </div>

                <div class="col-3 bloqueequipo">
                    <div>
                        <h5 class="nombreequipos">%s</h5>
                        <img src="%s" alt="" class="imgequipos" />
                    </div>
                </div>

                <div class="col-12 text-muted nombreequipos">
                    <small>%s</small>
                </div>

            </div>
        </div>
    </div>',

        /* assign the variables / data to the placeholders */
        $filapartidos['nombrelocal'],
        $filapartidos['imglocal'],
        $filapartidos['id'],
        $filapartidos['idfecha'],
        $filapartidos['nombrevisitante'],
        $filapartidos['imgvisitante'],
        $filapartidos['fecha']

    );//end printf

}//end while loop

<script>
    const ajax=function(url,data,callback){
        let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(e){
                if( this.status==200 && this.readySate==4 )callback( this.response );
            }
            xhr.open( 'POST', url, true );
            xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
            xhr.send( data )
    }

    Array.prototype.slice.call( document.querySelectorAll( 'form > div > input[type="submit"]' ) ).forEach( bttn=>{
        bttn.addEventListener('click',function(e){
            e.preventDefault();
            let fd=new FormData( e.target.parentNode.parentNode );
            let results=e.target.parentNode.parentNode.parentNode.querySelector('[data-id]');
            ajax( location.href, fd, function(r){
                alert(r);
                results.innerText=r
            });
        });
    });
</script>