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

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=

我该如何避免这种情况发生？

- qadenza

---

你尝试过不序列化吗？我提交我的数据类似这样： data: { 'foo': 'bar', 'foobar':'barfoo' }, - Ann-Sophie Angermüller

看起来你的ajax出了问题。你是否将JS代码放在$(document).ready函数内？ - Andrew

你正在查看错误的Ajax调用。你的Ajax调用没有问题。请再次检查。 - milan kyada

你是如何获取你的JS代码的？使用外部脚本还是内联脚本？想要看完整的代码！！！ - Jack jdeoel

Answer 1

只需指定表单方法：

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

- roberto06

---

这不正确，他正在尝试使用ajax提交表单。 - Andrew

好的，我漏掉了这一行，抱歉。看起来这是一个JS/AJAX问题，正如@Andrew在问题评论中提到的那样，我的最佳猜测是JS部分没有被执行。 - roberto06

从技术上讲，我的答案是正确的，如果添加 method='post'，那么 $_GET 变量将不再被使用 :P - roberto06

你的答案只是起作用了，因为提问者误解了问题，只是修复了一个症状，但是原因（即他的JS / AJAX）仍然存在问题。 - Jonnix

@JonStirling，你的解决方案是什么？ - qadenza

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>

- Mridul Kashyap

---

这就相当于在截掉手指后贴上一块创可贴。他最好找出他的函数为什么没有被调用，这样他就不会在其他地方遇到这个问题了。 - Andrew

Ajax工作正常。唯一的问题是包含变量的URL。 - qadenza

那么你如何解释URL的差异呢？如果只有这个AJAX被触发，那么你会看到的URL是http://localhost/gbookajax.php（因为变量将在正文中），而不是gbook.php。此外，我已经找出了你代码的问题。我正在更新我的答案。 - Mridul Kashyap

Answer 3

我不确定你是否想将表单作为GET发送，但同时隐藏链接中显示的变量，还是想要发送POST请求。根据您提供的JS代码，我假设您想要发送POST请求，所以我认为这应该对您有用。

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

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

// 编辑 由于您正在尝试发送POST请求，您还应该禁止按钮的核心功能以发送请求并刷新页面。因此，您可能需要在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;

})

- Reel