Question

我在php中为脚本创建了一个搜索表单。 Basicaly这个表单有一些复选框和一个提交按钮。每个复选框都是一个类别，如果我选中一个或多个复选框，结果将按照类别进行过滤。

这是html代码：

<?php
if ($_POST['do_search'] == 'true') {
$results = 'Do the query and store results in the $results var';
}
?>
    <form method="post" action="search.php" id="search">
     <input type="checkbox" name="categories[]" id="categories[]" value="1">Category 1
     <input type="checkbox" name="categories[]" id="categories[]" value="2">Category 2
     <input type="checkbox" name="categories[]" id="categories[]" value="3">Category 3
     <input type="submit" name="submit">
     <input type="hidden" id="do_search" value="true">
    </form>
    <div id="search_results">
<?php echo $results; ?>
</div>

我正在尝试使用ajax内联结果，对于我的脚本的大多数部分，我使用JQuery。任何人都可以帮我弄清楚如何通过ajax实时传递$ _POST数据，而无需重新加载页面？

P.S。对不起我的英语很差，我希望我很清楚：|

Answer 1

在jQuery中，当您执行AJAX请求时，请调用：

jQuery.ajax(options)

在您的选项对象中，请确保设置数据成员。该成员将javascript对象序列化为post数据。

然后，您可以拦截表单提交，并通过AJAX提交来自行动和表单字段的请求。

或者你可以使用更简单的

jQuery.post()

功能

http://docs.jquery.com/Ajax

Answer 2

从这开始：

$('#search').submit(function(){
    var _this = $(this);
    $.post(_this.attr('action'), _this.serialize(), function(result){
        // callback
    });
    return false;
});

Answer 3

这是一个公平detailed tutorial on AJAX form submission，它应该回答你的问题，虽然我不喜欢查询参数的完成方式。它有：

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});

我会这样做：

$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: {
    name: name,
    email: email,
    phone: phone
  },
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});

如果您想自动构建表单变量而不是自动构建它，请查看Serialize form to JSON with jQuery。

Answer 4

ID必须是唯一的，表单只关心名称。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $('#submitButton').click(function()
        {
            var catArray = new Array();
            var j = 0;
            for(var i = 0; i < 3; i++)
            {
                if(document.myForm.categories[i].checked == 1)
                {
                    catArray[j] = document.myForm.categories[i].value;
                    j++;
                }
            }

            // Just put this here so you can see the output
            // alert('array:'+catArray.toString());

            $.ajax(
            {
                type:    "POST",
                url:     "search.php",
                data:    ({ categories : catArray.toString() }),
                success: function(msg)
                {
                    $('#search_results').html(msg);
                }
            });

            return false;
        });
    });
</script>
</head>
<body>
    <form name="myForm" onsubmit="return false">
        Category 1<input type="checkbox" name="categories" id="category1" value="1" />
        Category 2<input type="checkbox" name="categories" id="category2" value="2" />
        Category 3<input type="checkbox" name="categories" id="category3" value="3" />
        <button id="submitButton">Submit</button>
    </form>
    <div id="search_results"></div>
</body>
</html>

使用Jquery过滤结果

4 个答案: