Question

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

我已将直接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似乎没有起作用

1 个答案: