php - 使用 javascript/ajax/php 提交 html 表单

Question

晚上，我似乎遇到了通过 javascript 提交此 html 表单的问题 onclick()功能。这是我第一次尝试这个，我是 js/ajax 的新手，但是根据我对两者的理解，我做的是正确的......最后这是我的目标:用户输入信息 - javascript/ajax 构造 GET 请求和发送它 - 我的 php 表单将每个输入字段作为自己的查询运行，每次运行查询时，它都会回显进度百分比(在每次运行查询后) - 然后(通过 ajax)将该百分比返回到我的 HTML5进度条(感谢新的 <prgress> 标签。)然后创建一个进度条。然而 1. 我想我可能做错了 2.我这样做的方式应该有效 3. 我已经筋疲力尽了……

这是我的代码:

function reply(){
 var total = document.getElementById("setName").name;
  var firstArray = new Array();
   for(i = 1; i <= total; i++){
    firstArray[] = "i = document.getElementById(i)";
   }
  //implode firstArray for uset in $_GET
  //aparently its called join...
  var GET = firstArray.join('&');

    //need to set up xml to run php for query
     if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp = new XMLHttpRequest();
      }
     else
      {// code for IE6, IE5
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

     xmlhttp.onreadystatechange = function(){
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
         document.getElementById("progressBar").innerHTML = xmlhttp.responseText;
       }
     };
xmlhttp.open("GET","ajaxQuery.php?"+GET,true);
xmlhttp.send();
}

再说一次，我是 js/ajax 的新手，但不是 PHP，运行查询不是问题，而且那部分工作完美无缺，但这甚至不会运行 onclick ....任何和所有帮助都是非常感谢的人。

作为旁注，我的输入字段使用数字作为名称属性，以便更好地与 js 交互，但这里是 onclick 调用

<button type = "button" onClick = "reply()">Submit</button>

我知道这可能会好很多，请随意将其拆开，最好的学习方法是批评自己的错误 :)

Answer 1

我尝试用 jQuery 重写您的一些代码。它应该可以工作，但我没有测试它:

<!--Import jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">

    $(function() {
        $("#submitButton").click(function(){
            reply();
        })
    });

    function reply(){
        var total = document.getElementById("setName").name;
        var firstArray = new Array();
        for(i = 1; i <= total; i++){
            firstArray[] = "i = document.getElementById(i)";
        }
        //implode firstArray for uset in $_GET
        //aparently its called join...
        var GET = firstArray.join('&');     

        var jqxhr = $.ajax( {
            type: "GET",
            url: "ajaxQuery.php?"+GET
        } )
        .done(function(data) { 
            $("#progressBar").html( data );    
        });



    }
</script>

<button type = "button" id="submitButton">Submit</button>