Question

我使用JSON格式的jQuery / AJAX提交数据，但成功函数没有被点击。

这是我的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()

当您在网址中发送该数据时。

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

$.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);
}

使用jQuery AJAX提交数据

2 个答案: