javascript - AJAX 成功回调仅执行第一个功能

Question

我提交了一个简单的表单，成功后我会收到一条警报并要求清除表单。我确实收到警报，信息已成功添加到数据库中，但第二个调用(清除表单)并未执行。我确信我做错了一些简单的事情，但我无法弄清楚。

$('#contact_submit').click(function(e){
                if ($("#submit_form_contact").valid()) {


                    var post_data = {
                        "name" : $('#name').val(),
                        "email" : $('#email').val(),
                        "inquiry" : $('#inquiry_dropdown option:selected').text(),
                        "message" : $('#message').val()
                    };


                    $.ajax({  
                      type: "POST",  
                      url: "process-contact.php",  
                      data: post_data,  
                      success: function(data) {  
                        alert("Thank you for contacting us.");
                        $('#submit_form_contact').reset();
                      }  
                    });

                    e.preventDefault();

                }

此外，提交按钮只是一个按钮，而不是提交输入。是否有必要阻止Default()？我对此很陌生。

Answer 1

jQuery 没有 .reset() 方法。

这样做:

$('#submit_form_contact')[0].reset();

这会获取第一个 DOM 元素，并调用 native .reset()。如果有可能找不到该表单，请测试该元素。

var f = $('#submit_form_contact')[0];

if (f)
    f.reset();

---

当然，您实际上并不需要 jQuery 来通过 ID 获取元素，特别是如果您不打算使用任何 jQuery 方法。

var f = document.getElementbyId('submit_form_contact');

if (f)
    f.reset();

---

另一种替代方法是将提交按钮设置为 ajax 调用的 context:，然后使用其 form 属性。

                $.ajax({  
                  context: this,
                  type: "POST",  
                  url: "process-contact.php",  
                  data: post_data,  
                  success: function(data) {  
                    alert("Thank you for contacting us.");
                    this.form.reset();
                  }  
                });