Question

我写了以下JQUERY代码：

$(document).ready(function () {
   $('#incidentForm').submit(function(e){
       e.preventDefault();
       var incidentLatitudeValue = $('#incidentLatitude').val();
       $.post('ajax/test.php', {
           incidentLatitude: incidentLatitudeValue
       }, function(data){
           console.log(e.target);
           console.log(data);
       });
   });
});

当点击表单提交按钮时，应该触发此操作：

<div>
    <form id="incidentForm" method="post" class="form-horizontal">
        <div class="form-group">
            <label for="inputLatitude" class="col-sm-1 control-label">Latitude</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" id="incidentLatitude" name="inputLatitude" placeholder="Latitude">
            </div>
        </div>
        <div class="form-group">
            <label for="inputLongitude" class="col-sm-1 control-label">Longitude</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" name="inputLongitude" placeholder="Longitude">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-1 col-sm-10">
                <button name="submit" id="incidentSubmit" class="btn btn-danger" onclick="return false">Submit</button>
            </div>
        </div>
    </form>
</div>

当我在Chrome中记录JAVASCRIPT控制台中的输出时，我得到XHR完成加载两次的反馈。

XHR finished loading: POST "http://api.mf.de/public/ajax/test.php".
XHR finished loading: POST "http://api.mf.de/public/ajax/test.php".

我在JQUERY代码中没有看到这个问题。提交按钮ID仅在我的代码中提供一次。

Answer 1

使用.submit()代替.click()。同时停止preventDefault()

的默认操作

$('my-form-and-not-button').submit(function (e) { 
  e.preventDefault();
  // i promise to do the rest of my stuff here
});

Answer 2

您可以删除该按钮的提交类型并自行处理所有点击或使用.submit而不是点击@Dhiraj提及。

提交表单时，AJAX请求会触发两次

2 个答案: