通过ajax传递数据

Question

我正在按照教程传递文本以通过Ajax搜索，效果很好。 现在，我还要传递复选框值。 有人可以指出我正确的方向吗？ 现在我有：

             function search(){

                  var term=$("#search").val();

                  if(term!=""){
                    $("#result").html("<img src='/img/spin.gif'/ style='margin-top: 30px;'>");
                     $.ajax({
                        type:"post",
                        url:"file.php",
                        data:"q="+encodeURIComponent(term), /* encodeURI is used to escape things such as plus sign */
                        success:function(data){
                            $("#result").html(data);
                            $("#search").val("");
                         }
                      });
                  }

因此，基本上我认为文本是通过post变量“ q”发送的。 假设我有多个复选框，如何将其添加到同一发布请求中？

Answer 1

您可以使用jQuery的序列化。

$('#form').submit(function(e) {

    var data  = $('#form').serialize();

    $.post('form.php',data, function(status) {
        if(status == 'success') {
            // success
        } else {
            // error
        }
    });
    e.preventDefault();
});

form.php

<?php

$search = $_POST['search'];
etc...

Answer 2

$.ajax({
   type:"post",
   url:"file.php",
   data: {
       q: encodeURIComponent(term), /* encodeURI is used to escape things such as plus sign */
       checkboxes: $('input[type=checkbox]').serialize()
   }
   success:function(data){
      $("#result").html(data);
      $("#search").val("");
   }
});

Answer 3

如果您尝试序列化数据，这对您来说会更简单。

您没有编写html的外观，因此，假设您具有这样的形式：

<form id="form">
   Search text: <input type="text" name="data[text]"/>
   <input type="checkbox" name="data[option]" /> Option 1
   <input type="submit" value="Search"/>
</form>

要发送带有ajax请求的表单，您要做的就是序列化表单

$('#form input[type="submit"]').click(function(e) {
   e.preventDefault();

   $.post("file.php", $("#form").serialize(), function(){
       console.log('success');
   });
});

然后在您的php脚本中，您可以从$ _POST变量中检索数据，例如$ _POST ['data'] ['text']