使用 javascript/ajax/php 提交 html 表单答案

【问题标题】：Submitting a html form with javascript/ajax/php使用 javascript/ajax/php 提交 html 表单
【发布时间】：2013-02-05 22:47:40
【问题描述】：

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

这是我的 js：

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>

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

【问题讨论】：

为什么不试试jquery之类的框架呢？这将使您免于处理 activeX 和 XMLHttpRequest 的麻烦。
@John 我几乎不熟悉 js /ajax，更不用说 jquery了
jQuery 让它更容易理解。试试这个：docs.jquery.com/Tutorials:Getting_Started_with_jQuery
@John Ill 看看它，但这并不能完全解决这个问题^：P
你能试试<input type = "button" onclick = "reply()" value="Submit"/>（我不知道按钮（HTML5）是否仍然接受onclick（旧方法））。如果它没有用 jQuery 重写你的代码 ;-)

标签： php javascript ajax onclick progress-bar

【解决方案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>

【讨论】：

由于某种原因不起作用，我已将其缩小到 onclick 无法正常工作，我将查看您推荐的那个教程，看看我是否能弄清楚。

【解决方案2】：

要构造查询字符串，您应该这样做：

var firstArray = new Array(), qs;

for(i = 1; i <= total; i++){
    firstArray.push('i[]=' + encodeURIComponent(document.getElementById(i).value);
}

// i[]=123&i[]=456&...
qs = firstArray.join('&');

// ...

xmlhttp.open("GET", "ajaxQuery.php?" + qs, true);

顺便说一句，您不应该使用带有以数字开头的id 属性的元素！

【讨论】：