javascript - jQuery.ajax 将不需要的参数放入 URL

Question

我正在使用 $.ajax 插入和更新数据库。我在网页上有一个 <form>，$.ajax 看起来像这样:

$('.submit-create-customer').on('click touchstart', function() {
    var first_name = $('#first_name').val();
    var last_name = $('#last_name').val();
    var email = $('#email').val();
    var confirm_email = $('#confirm_email').val();
    var phone = $('#phone').val();
    var address = $('#address').val();
    var address_2 = $('#address_2').val();
    var city = $('#city').val();
    var state = $('#state').val();
    var zipcode = $('#zipcode').val();

    var formData = "first_name=" + first_name + "&last_name=" + last_name + "&email=" + email + "&confirm_email=" + confirm_email + "&phone=" + phone + "&address=" + address + "&address_2=" + address_2 + "&city=" + city + "&state=" + state + "&zipcode=" + zipcode;
    $.ajax({ // Start the PHP submission
                url : "/resources/submit.php?action=createCustomer",
                type: "POST",
                data : formData,
                success: function(data, textStatus, jqXHR) {    //data - response from server
                    alert('success');
                },
                error: function(data, textStatus, jqXHR) {
                    alert('failure');
                }
            });

});

HTML:

<form class="validate">
    <div class="col-md-6">
        <input class="form-control input-md validate-name" id="first_name" name="first_name" minlength="2" type="text" placeholder="First Name">
        <input class="form-control input-md validate-name" id="last_name" name="last_name" minlength="2" type="text" placeholder="Last Name">
        <input class="form-control input-md validate-email" id="email" name="email" minlength="2" type="text" placeholder="Email">
        <input class="form-control input-md validate-email" id="confirm_email" name="confirm_email" minlength="2" type="text" placeholder="Confirm Email">
        <input class="form-control input-md validate-phone" id="phone" name="phone" type="text" placeholder="Phone">
    </div>
    <div class="col-md-6">
        <input class="form-control input-md validate-address" id="address" name="address" type="text" placeholder="Address">
        <input class="form-control input-md validate-address" id="address_2" name="address_2" type="text" placeholder="Address Line 2">
        <input class="form-control input-md validate-name" id="city" name="city" type="text" placeholder="City">
        <select class="form-control input-md validate-select" id="state" name="state">
            <option value="-1" disabled selected>State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
        </select>
        <input class="form-control input-md validate-zipcode" id="zipcode" name="zipcode" type="text" placeholder="Zipcode">
    </div>
    <button class="btn btn-md submit-create-customer" disabled>Submit</button>
</form>

URL 返回 true 或 false 。收到警报后，我发出请求的同一网页会重新加载一堆 URL 参数。它看起来像这样:

/customers.php?first_name=Trevor&last_name=Hutto&email=this%40that.com&confirm_email=this%40that.com&phone=1234567891&address=1234+Memory+Lane&address_2=Apt.+1131&city=New+York&state=NY&zipcode=12345

当我将请求 type 声明为 POST 时，为什么会发生这种情况？另外，AJAX 的意义不是异步并在后台发出请求吗？为什么页面重新加载？

Answer 1

我的猜测是因为您没有阻止触发正常操作，所以浏览器会运行您的代码，然后按照正常方式运行。

尝试改变:

$('.submit-create-customer').on('click touchstart', function() {
    // Other code

收件人:

$('.submit-create-customer').on('click touchstart', function(e) {
    e.preventDefault();
    // Other code

编辑:另外，如果这是一个表单，我强烈推荐 jQuery.form 插件(http://malsup.com/jquery/form/)。

还有一件事，如果这确实是一个表单，请不要将点击事件挂接到提交按钮，而是将提交事件挂接到实际表单。这样用户可以以任何方式提交表单，它仍然会使用 ajax 处理。

我认为如果您也显示 HTML 会有所帮助。