Question

无法弄清楚出现了什么问题但发生的一切都是网址更改为＆＃34; http://localhost/?search=test＆＃34;如果我进入＆＃34;测试＆＃34;例如。

的index.php

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>

<script>

$("#Form").submit(function(e) {

    $.ajax({
           type: "POST",
           url: "search.php",
           data: $("#Form").serialize(),
           success: function(data)
           {
               alert(data); 
           }
         });

    e.preventDefault();
});

</script>
</head>
<body>

<form id=Form> 
Search: <input type="text" name="search" id="search" /><br /> 
<input type="submit" value="Submit" /> 
</form> 

</body>
</html>

的search.php

<?php 
echo 'The search is '. $_POST['search'];
?>

Answer 1

首先，您忘记了“表单ID并且好好添加method=""

<form method="post" action="#" id="Form">

第二次尝试在开头使用e.preventDefault();而不是结束

第3次尝试重新排列代码

<body>

<form method="post" action="#" id="Form">
Search: <input type="text" name="search" id="search" /><br /> 
<input type="submit" value="Submit" /> 
</form> 
<script>

$("#Form").on('submit',function(e) {
    e.preventDefault();  // use it here
    $.ajax({
           type: "POST",
           url: "search.php",
           data: $("#Form").serialize(),
           success: function(data)
           {
               alert(data); 
           }
         });
});

</script>

Answer 2

您错过了action上的method和form，这是表单生成submit事件所必需的。

<form id="Form" method="post" action="search.php" />

现在我们已经定义了操作和方法，为什么不从form中取出它而不是在Javascript中重写它？这对于可重用性来说会更好。另请注意，您必须在DOM准备好时分配事件处理程序。在您分配事件时，DOM元素不存在，因此它将不执行任何操作：

<script type="text/javascript">
    $(document).ready(function() { // Here, after DOM is ready
        $('#Form').submit(function(e) {
            e.preventDefault();

            $.ajax({
                type:    $(this).attr('method'),
                url:     $(this).attr('action'),
                data:    $(this).serialize(),
                success: function(data) {
                    // At this point, we already have the response from the server (we got it asynchronously)
                    // Lets update a div, for example <div id="response_message"></div>
                    $('#response_message').text( data );
                    // Div already has data, show it.
                    $('#response_message').show();

                    // Another option (same as before but with a function): Pass the response data to another function already defined: processData() in this case
                    // Use one or another, they're the same
                    processData( data );
                },
                error:   function(err) {
                    alert('An error just happened...');
                }
            });
        });
    });

    // This functions only receives data when the asynchronous call is finished
    function processData( data )
    {
        $('#response_message').text( data );
        // Div already has data, show it.
        $('#response_message').show();
    }
</script>

请注意，在异步调用中，您不希望返回。它根本不存在于设计中（因为在数据准备好之前脚本将被阻塞，并且称为同步）。你在异步调用中所做的是定义一个函数/方法，在数据准备就绪时随时调用（这是success处理函数）。您不知道它将在何时被调用，您只知道在获取数据时它将被调用，而参数将是服务器的实际响应。

JQuery AJAX POST没有返回任何内容

的index.php

的search.php

2 个答案: