使用 jQuery ajax 使用 GET 处理表单和 url

Question

我想使用 jQuery $.ajax GET 方法处理一个表单，并且查询参数最终位于 url 中。如果我在没有 jquery 的情况下处理表单，我可以做到这一点，但如果我通过 jQuery 的 $.ajax 方法来完成，我必须使用 event.preventDefault() 来阻止浏览器的默认操作，在这种情况下，参数永远不会出现在 url .基本上，如果有人从 url 输入查询（即 mysite.com?param1=myValue ）或者如果他们单击提交按钮，我希望这样做是提交/处理表单。

<form id='myForm' action="" method="get">
    Username: <input type="text" id="username" name="username" value="" />
    <button id='submitButton' name="">Search</button>
<form>

<script>
 $('#myForm').submit(function(event) {
        event.preventDefault();
        var formData = $(this).serialize(); 
        $.ajax ( {
            url: "myScript.php",
            type: 'GET',
            data: formData,
            success: function (data) {
               console.log(data);
            }
        } );
    });
</script>

myScript.php：

<?php 
$returnString = array();
$returnString['username'] = $_GET['username'];
echo json_encode($returnString);
?>

Answer 1

构建一个标准按钮（不是提交），然后在该按钮的 onClick 上，构建您的查询字符串并执行您的 ajax 调用。这比试图缩短标准表单提交更容易。您的代码已经差不多了。

如果有人手动输入带有参数的 url 并单击“go”，您的服务器端代码将返回与 ajax 调用相同的响应，因为服务器不关心谁调用它，所以不用担心。我要做的是在 ajax 调用中添加一个额外的参数，并且在服务器端，如果存在此参数（意味着它是从 ajax 调用的并且数据将返回到现有页面），则只需返回 json。如果缺少参数（意味着它是从标准提交中调用的），则返回整个 html 文档，很可能是同一页面，但 json 已在 dom 中处理。

让服务器端代码“如果是 ajax，则返回这个，否则返回这个 AND 一个完整的 html 文档”是很常见的。