Question

<form id='gbookform'>
    <input id='inputname' type='text' name='name' autocomplete='off' placeholder='Your name'>
    <input id='inputcon' type='text' name='contact' autocomplete='off' placeholder='Your contact or website'>
    <div id='forminfo'></div>
    <textarea id='inputstory' name='story' rows='9' placeholder='Your story'></textarea>
    <div class="g-recaptcha" data-sitekey="6LfobygTAAAAACxBzCl1FxPe4lALE-669wt6NC7G"></div>
    <input id='btnsubmit' type='submit' value='SEND'>
</form>

JS

$("#gbookform").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "gbookajax.php",
        data: $(this).serialize(),
        success: function(data) {
            $('#dataload').load('gbookdata.php');
            $('#forminfo').text(data).show();
        }
    })
})

提交表单后，我看到我在url中写的变量：
http://localhost/gbook.php?name=q&contact=q&story=q&g-recaptcha-response=

我该如何避免这种情况？

Answer 1

只需指定表单方法：

<form id='gbookform' method='post'>...</form>

Answer 2

你的ajax无效。

中的文件名

http://localhost/gbook.php?name=q&contact=q&story=q&g-recaptcha-response=

与

不同

url: "gbookajax.php",

所以我相信表单是以常规方式发布的，而不是ajax。你可以做的是把

$("#btnsubmit").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "gbookajax.php",
        data: $(this).serialize(),
        success: function(data) {
            $('#dataload').load('gbookdata.php');
            $('#forminfo').text(data).show();
        }
    })
})

在一个函数中，如：

function postForm(){
    ...// the ajax request above
}

并添加替换：

<input id='btnsubmit' type='submit' value='SEND'>

带

<button onclick="postForm()">SEND</button>

Answer 3

我不确定您是否要将表单作为GET发送，但是要禁止链接中显示的变量，或者是否要发送POST请求。根据您提供的JS，我假设您要发送POST请求，因此我认为这应该适合您。

<form id='gbookform' method="post">
...
</form>

注意第一行代码的区别，其中添加了方法。表单的默认方法是GET，因此它被视为原因。

//编辑由于您尝试发送发布请求，因此您还应该禁止按钮核心功能来发送请求并刷新页面。所以对你的JS你应该添加这个......

$("#gbookform").submit(function(e) {
e.preventDefault();
$.ajax({
    type: "POST",
    url: "gbookajax.php",
    data: $(this).serialize(),
    success: function(data) {
        $('#dataload').load('gbookdata.php');
        $('#forminfo').text(data).show();
    }
})
return false;

})

使用ajax提交表单后如何避免URL $ _GET变量？

3 个答案: