[英]jQuery.ajax putting unwanted parameters in URL
我正在使用$.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的意義不在於異步並在后台發出請求嗎? 為什么要重新加載頁面?
我的猜測是,由於您不會阻止正常動作的觸發,瀏覽器會運行您的代碼,然后再執行正常的行為。
嘗試更改:
$('.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/ )。
還有一點,如果這確實是一種表單,請不要將click事件掛接到提交按鈕,而是將一條提交事件掛接到實際的表單。 這樣,用戶可以以任何方式提交表單,並且仍將使用ajax處理該表單。
如果您也顯示HTML,我認為這會有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.