使用 jQuery AJAX 提交数据

Question

我正在使用 jQuery/AJAX 以 JSON 格式提交数据，但未命中成功函数。

这是我的 JavaScript：

function addOrder(accounts,profiles) {
    var ticker = $('#ticker').val();
    var Quatity = parseFloat($('#quantity').val()); 
    var lmtPrice = parseInt($('#price').val());
    var OrderType = $('#type').val();
    var Action = $('#action').val();
    var TIF = $('#tif').val();
    var url = rootURL+'/submit?account='+ accounts+'&profile='+ profiles+'&Ticker='+ ticker+'&Quatity='+ Quatity+'&lmtPrice='+ lmtPrice+'&OrderType='+ OrderType+'&Action='+ Action+'&TIF='+ TIF;

    $.ajax({
        type: 'POST',
        contentType: 'application/json',
        url: url,
        dataType: "json",
        data: $('orderform').serialize(),
        /*data: dataString,*/
        complete : function(){
            alert(this.url)
        },
        success: function(data, textStatus, jqXHR){
            alert('Order created successfully');
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('Order error: ' + textStatus);
        }
    });
}

$('#btnSave').click(function() {
    addOrder(option,option2);
});

这是我的 HTML 表单：

<form id="orderform">
   <div class="clearfix box">
      <div class="col-md-4 righttext label">Ticker:</div>
      <div class="col-md-8"><input type="text" name="ticker" id="ticker" /></div>
   </div>
   <div class="clearfix box">
      <div class="col-md-4 righttext label">Quatity:</div>
      <div class="col-md-8"><input type="text" name="quantity" id="quantity" /></div>
   </div>
   <div class="clearfix box">
      <div class="col-md-4 righttext label">lmtPrice:</div>
      <div class="col-md-8"><input type="text" name="price" id="price" /></div>
   </div>
   <div class="clearfix box">
      <div class="col-md-4 righttext label">OrderType:</div>
      <div class="col-md-8">
         <select name="type" id="type">
            <option>MKT</option>
            <option>LMT</option>
         </select>
      </div>
   </div>
   <div class="clearfix box">
      <div class="col-md-4 righttext label">Action:</div>
      <div class="col-md-8">
         <select name="action" id="action">
            <option>BUY</option>
            <option>SELL</option>
         </select>
      </div>
   </div>
   <div class="clearfix box">
      <div class="col-md-4 righttext label">TIF:</div>
      <div class="col-md-8">
         <select name="tif" id="tif">
            <option>DAY</option>
            <option>GTC</option>
         </select>
      </div>
   </div>
   <div class="clearfix box">
      <div class="col-md-4 righttext label">&nbsp;</div>
      <div class="col-md-8">
         <input type="submit" id="btnSave" value="submit" />
         <!--<button id="btnSave">submit</button>-->
      </div>
   </div>
</form>

当我点击提交按钮时，脚本总是点击错误函数。

Answer 1

问题可能是因为这个。不知道是不是笔误

data: $('orderform').serialize()

这里需要添加选择器，即id

data: $('#orderform').serialize()

由于您使用的是按钮类型提交，因此在执行 ajax 之前阻止默认行为

$('#btnSave').click(function(event) {
        event.preventDefault();
        addOrder(option,option2);

}); 

或使用button type='button' 代替submit

Answer 2

您需要删除 contentType，因为您没有传递 JSON。

您还需要确保将 HTTP 状态代码设置为 200，以便从您的 JSON 响应进入成功函数。例如，如果您使用的是 PHP：

<?php 
header("Access-Control-Allow-Origin: *");
header("HTTP/1.1 200 OK");
echo json_encode($yourReturnArray);

您还发送键值对的 URL 和序列化数据中发送的表单数据：您只需要做一个或另一个。删除线

data: $('#orderform').serialize()

当您在 URL 中发送该数据时。

您还可以添加一些更好的错误捕获功能：

$.ajax({
    url     : YOUR_URL,
    success : function(data, status, xhr) {
        //
    },
    error   : function(jqXHR, status, error) {
        ajaxError(jqXHR, status, error);
    }
});

function ajaxError(jqXHR, status, error) {
    var msg = '';
    if (jqXHR.status === 0) {
        msg = 'Not connected.\n Verify Network.';
    } else if (jqXHR.status == 404) {
        msg = 'Requested page not found [404]';
    } else if (jqXHR.status == 500) {
        msg = 'Internal Server Error [500]. ' + jqXHR.responseText;
    } else if (error === 'parsererror') {
        msg = 'Requested JSON parse failed.';
    } else if (error === 'timeout') {
        msg = 'Time out error.';
    } else if (error === 'abort') {
        msg = 'Ajax request aborted.';
    } else {
        msg = 'Uncaught Error.\n' + jqXHR.responseText;
    }
    alert(msg);
}