2

晚上，我似乎遇到了通过 javascriptonclick()函数提交此 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>

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

4

2 回答 2

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>
于 2013-02-05T23:11:56.063 回答
1

要构造查询字符串，您应该执行以下操作：

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具有以数字开头的属性的元素！

于 2013-02-05T23:18:09.887 回答