在Rails中使用jquery ajax無法正常工作。

目前，我正在學習rails，然後我想到了使用jquery發送ajax的形式，我知道ujs但我不想使用它。我想用純JavaScript或jQuery來學習（理解它）。所以，我有這樣的問題，即當我點擊提交按鈕，它成爲禁用，也當我使用這種方式在Rails中使用jquery ajax無法正常工作。

$(function() { 
    var form = $('#new_post'); 
    var formData = $(form).serialize(); 

    $(form).submit(function(event) { 
    $.ajax({ 
     type: 'POST', 
     url: $(this).attr('action'), 
     dataType: 'json', 
     data: formData 
    }).done(function (response) { 
     console.log(response); 
    }) 

    event.preventDefault(); 
    }) 
});

的連載formData是空的，但是當我試圖這樣

$(function() { 
    var form = $('#new_post');  
    $(form).submit(function(event) { 
    $.ajax({ 
     type: 'POST', 
     url: $(this).attr('action'), 
     dataType: 'json', 
     data: $(form).serialize() 
    }).done(function (response) { 
     console.log(response); 
    }) 

    event.preventDefault(); 
    }) 
});

這是我直接調用內部的ajax $(form).serialize()。我不明白有什麼區別，但我試圖做一些研究，我找不到答案。

順便說一句，這個鐵軌形式。

來源

2016-07-06 Pepeng A.

更改您這樣的代碼：

$(function() { 
    var form = $('#new_post'); 
    // Directly use the variable created above 
    form.submit(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: form.attr('action'), 
     dataType: 'json', 
     data: form.serialize() 
    }).done(function (response) { 
     console.log(response); 
    }) 
    }) 
});

下面的代碼將無法正常工作：

$(function() { 
    var form = $('#new_post'); 
    //formData is empty when the page loads and the same value is getting assigned inside the ajax call which is wrong. 
    //Therefore the best way is to directly get the data while submitting the form. 
    var formData = form.serialize(); 

    form.submit(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: form.attr('action'), 
     dataType: 'json', 
     //Here formData is empty 
     data: formData 
    }).done(function (response) { 
     console.log(response); 
    }) 
    }) 
});

來源

2016-07-06 11:29:30 sahil

感謝您的回答，但我的問題是爲什麼'formData'是空的，如果我聲明上面沒有直接在ajax裏面，並且按鈕被點擊後被禁用？有關於此的任何想法？ –

由於表單變量已經包含$（'＃new_post'），它是一個jQuery對象，您不應該再次將jQuery對象放入另一個jQuery選擇器中。在上面的代碼中，你也可以像這樣嘗試：'var formData = form.serialize（）;'然後在ajax調用中使用formData，它將起作用。 – sahil

對於殘疾人，請檢查生成的html，如果按鈕標籤中有任何html屬性，一旦加載頁面應該像'data-disable-with'。 – sahil

我已經知道爲什麼。笑

$(function() { 
    var form = $('#new_post'); 

    form.submit(function(event) { 
    var formData = form.serialize(); 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: form.attr('action'), 
     dataType: 'json', 
     data: formData 
    }).done(function (response) { 
     console.log(response); 
    }) 

    }) 
});

的var formData = form.serialize();應提交事件裏面，所以它具有通過用戶輸入的數據。

來源

2016-07-06 12:52:02

在Rails中使用jquery ajax無法正常工作。

回答

相關問題