使用jqueryajax通过GET处理表单和url

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

<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>

用户名：
搜寻
$（'#myForm'）。提交（函数（事件）{
event.preventDefault（）；
var formData=$（this.serialize（）；
$.ajax（{
url:“myScript.php”，
键入：“GET”，
数据：formData，
成功：功能（数据）{
控制台日志（数据）；
}
} );
});

myScript.php：

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

构建一个标准按钮（不提交），单击该按钮，构建查询字符串并执行ajax调用。这比试图短接标准表单提交更容易。你的代码已经快到了

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

---

服务器端代码“如果是ajax，返回这个，否则返回这个和完整的html文档”是很常见的。因此，我将其转换为按钮单击事件并删除了默认值，但现在序列化函数不起作用。var formData=$（this.serialize（）；我以前还没有使用过序列化，但初步的搜索显示，有些人认为它是命中或遗漏。如果表单很短，那么使用var myval=$（“#myinput”）.val（）也没那么糟糕。有点冗长，而且您的函数不会像它可能的那样光滑，但它会工作。序列化函数实际上是工作的。我需要更改$（此）。序列化为（“#myForm”）。序列化很好！使用serialize肯定比手动解析输入更优雅。