每次点击提交按钮时如何执行新的AJAX?

时间:2017-12-21 23:49:50

标签: javascript jquery ajax forms

我有一个表单,每次单击提交按钮时都会执行该表单。单击提交按钮时,将显示模态,并使用JSON数据填充模态。应用程序 / addresschecker 检查发布的地址,如果我得到的代码返回数为2003,则向我发送错误消息。如果不是,我使用jQuery的$ .each

通过JSON选择返回数据

该应用程序有效,但当我关闭模式,重新填写表单并单击提交时,表单不会重新调用 / addresschecker 我在Chrome的网络选项卡中查看了它似乎使用旧数据。我想我每次用户点击提交按钮或以某种方式清除缓存时都需要强制执行新的Ajax调用。不知道为什么我看到旧数据

<form id="Validate">
  <input class="form-control" id="adr1" name="address1" type="text" placeholder="Address 1" />
  <input class="form-control" id="adr2" name="address1" type="text" placeholder="Address 1" />
  <button type="submit" >Submit</button>
</form>

<div class="modal hide">
  <!-- JSON Data returned -->
  <div id="Message_1"></div>
  <div id="Message_2"></div>
  <div id="error_message"></div>
</div>


// My main form code
submitHandler: function(form) {
  $.ajax({
    url: '/addresschecker',
    type: 'post',
    cache: false,
    dataType: 'json',
    data: $('form#Validate').serialize(),
    success: handleData
  });

  function handleData(data) {
    var mesgcheck = data.message;

    if (data.code == '2003') {
      $("#error_messag").html(mesgcheck);
    } else {
      // Display Modal
      $(".modal").removeClass("hide");
      $.each(data, function(i, suggest) {
        $(".adr1").val(suggest.address1);
        $(".adr2").val(suggest.address2);
      });                        
    }
  }
}

1 个答案:

答案 0 :(得分:0)

让ajax处理您的请求。

使用此:

<input type="button" value="submit">

而不是提交类型。