AJAX 似乎不起作用

Question

当我使用下面的 ajax 代码单击按钮提交我的表单时，没有任何反应，none 的警报被触发以告诉我是否有错误或成功，并且所以我不确定如何知道发生了什么，无论我尝试什么我都无法触发警报。

我已将直接 url 放入表格并绕过 ajax，所以我知道 php 页面工作正常，但似乎没有通过 AJAX 代码

传递时获取数据

有什么方法可以查看正在传递到 php 页面的数据吗？

$(document).ready(function() {
  $('form.submit').submit(function() {
    var name = $(this).find('.name').attr('value');
    var address = $(this).find('.address').attr('value');
    var number = $(this).find('.number').attr('value');
    var price = $(this).find('.price').attr('value');
    var deposit = $(this).find('.deposit').attr('value');
    var product = $(this).find('.product').attr('value');
    var payment_type = $(this).find('.payment_type').attr('value');
    var deal_date = $(this).find('.deal_date').attr('value');
    var install_date = $(this).find('.install_date').attr('value');
    var installed = $(this).find('.installed').attr('value');
    var notes = $(this).find('.notes').attr('value');
    var contract_received = $(this).find('.contract_received').attr('value');
    var id = $(this).find('.id').attr('value');

    // ...

    $.ajax({
      type: "POST",
      url: "http://www.thinkecosolutions.co.uk/test/services/update.php",
      data: $('form.submit').serialize(), // or just: data: $(this).serialize(),
      success: function() {
        alert('success');
      },
      error: function() {
        alert('failure');
      }
    });
    return false;
  });
});

好的，所以使用了开发人员工具后，很明显代码没有到达 php 页面，所以这一定是我构建 js 页面的方式，而表单不是也许看到 ajax 部分？下面是我的js页面。

$('#detailsPage1').live('pageshow', function(event) {
var id = getUrlVars()["id"];
$.getJSON(serviceURL + 'getemployee.php?id='+id, displayEmployee1);
});

function displayEmployee1(data) {
var employee = data.item;
console.log(employee);
$('#fullName').html('<form action=""  id="submit" class="submit"><label>Name</label><br><input name="name" class="form-control" type="text" placeholder="Name" value="' + employee.name + '"/><br><label>Number</label><br><input name="number" class="form-control" type="text" placeholder="Number" value="' + employee.number + '"/><br><label>Address</label><br><input name="address" class="form-control" type="text" placeholder="Address" value="' + employee.address + '"/><br><label>Price</label><br><input name="price" class="form-control" type="text" placeholder="Price" value="' + employee.price + '"/><br><label>Deposit</label><br><input name="deposit" class="form-control" type="text" placeholder="Deposit" value="' + employee.deposit + '"/><br><label>Payment Type</label><br><input name="payment_type" class="form-control" type="text" placeholder="Payment type" value="' + employee.payment_type + '"/><br><label>Deal Date</label><br><input name="deal_date" class="form-control" type="text" placeholder="Deal Date" value="' + employee.deal_date + '"/><br><label>Install Date</label><br><input name="install_date" class="form-control" type="text" placeholder="Install Date" value="' + employee.install_date + '"/><br><label>Installed</label><br><input name="installed" class="form-control" type="text" placeholder="Installed" value="' + employee.installed + '"/><br><label>Notes</label><br><input name="notes" class="form-control" type="text" placeholder="Notes" value="' + employee.notes+ '"/><br><input name="id" id="id" type="hidden" value="' + employee.id + '" /><br><label>Contract Received</label><br><input name="contract_received" class="form-control" type="text" placeholder="Contract Received" value="' + employee.contract_recieved + '"/><br><br><input type="submit" name="button" id="button" value="Update" /></form>');

$(document).ready(function(){
$('form.submit').submit(function () {
var name = $(this).find('.name').attr('value');
var address = $(this).find('.address').attr('value');
var number = $(this).find('.number').attr('value');
var price = $(this).find('.price').attr('value');
var deposit = $(this).find('.deposit').attr('value');
var product = $(this).find('.product').attr('value');
var payment_type = $(this).find('.payment_type').attr('value');
var deal_date = $(this).find('.deal_date').attr('value');
var install_date = $(this).find('.install_date').attr('value');
var installed = $(this).find('.installed').attr('value');
var notes = $(this).find('.notes').attr('value');
var contract_received = $(this).find('.contract_received').attr('value');
var id = $(this).find('.id').attr('value');
// ...
    $.ajax({
type: "POST",
url: "http://www.thinkecosolutions.co.uk/test/services/update.php",
data: $('form.submit').serialize(),    // or just: data: $(this).serialize(),
success: function(){
alert('success');
 },
error: function(){
alert('failure');
 }
 });
return false;
});
});

console.log(employee.telephone);
if (employee.notes) {}


  }

function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
}
return vars;
}

Answer 1

我建议你这样做（我每次都这样做）：

//This line prepares your form to be submited
$('#YOUR_FORM_ID').on('submit', function (event ) {

    //Then you prevent your form to be submited by default
    event.preventDefault();

    var form = $('#YOUR_FORM_ID').serialize();

    $.ajax({
        method: "POST",
        url: "YOUR_URL",
        data: form,
        success: function( msg ) {
           //Any action after success 
        },
        error: function(){
            alert( "Error")
        }
    });
});

如有任何疑问，请告诉我

在评论中，我逐步解释了如何检查发送到特定 php 文件的内容

AJAX 似乎不起作用

AJAX doesn't seem to be working

ajax

jquery

jqxhr