Question

我已经写了100多次......所以请事先原谅我的愚蠢。

简单的ajax - ＆gt; php - ＆gt; HTML

到目前为止，beforeSend出现了，然后从那一点开始没有任何事情发生。其他一切都很好。我试过doc准备好了，在main函数中使用ajax函数，重新编写ajax 4种不同的方式......每次它仍然行为相同...发送之前...然后页面返回到它是什么没有Ajax：成功发生了！？

JQ / JS

$(function() {
  $('.error').hide();
  $(".add_item_btn").click(function() {
    // validate and process form here

    $('.error').hide();
    var itemTitle = $("input#add_item_item_title").val();
      if (itemTitle == "") {
      $("label#add_item_item_title_error").show();
      $("input#add_item_item_title").focus();
      return false;
    }

    //var groupID = $("input#add_item_unit_price").val();  
    var groupID = $("select#add_item_groupid option").filter(":selected").val();

    var unitPrice = $("input#add_item_unit_price").val();

    if (unitPrice == "") {
    $("label#add_item_unit_price_error").show();
    $("input#add_item_unit_price").focus();
    return false;
    }

    if (isNaN(unitPrice)) // this is the code I need to change
    {
        //alert("Must input numbers");
        $("label#add_item_unit_price_error2").show();
        return false;
    }

    var dataString = 'itemTitle='+ itemTitle  + '&groupID=' + groupID + '&unitPrice=' + unitPrice;
    //alert (dataString);return false;

    //add_item();
    nu();

  });
});


function nu(){
var a = "1";
var url = "test2.php";
$.ajax({
            type: 'POST',
            url: url,
            dataType: 'html',
            data: {
                a: a
            },
            beforeSend: function() {
                    document.getElementById("message").innerHTML="<span class='blink_me'>Sending..</span>"  ;
            },
            success: function() {
                    document.getElementById("message").innerHTML="<span class='blink_me'>Done</span>" ;

            }
});
}

PHP

<?    
echo "Test Success";
?>

Html

<form name='add_item_form'>
    <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">Add Item</h3>
          </div>
          <div class="panel-body">
            <div class="input-group">
              <span class="input-group-addon">Title</span>
              <input type="text" id='add_item_item_title' name="add_item_item_title" class="form-control" placeholder="Max 50 Chars" />
            </div>
            <label class="error" for="add_item_item_title" id="add_item_item_title_error">This field is required.</label>

            <br />

            <div class="input-group">
                <span class="input-group-addon">Select Group</span>
                <select id='add_item_groupid' class="form-control">
                    <option value="1">Drink</option>
                    <option value="2">Food</option>
                    <option value="3">Deli</option>
                    <option value="4">Shelf</option>
                </select>
            </div>

            <br />

            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-gbp"></span></span>
              <input type="text" id='add_item_unit_price' name='add_item_unit_price' class="form-control" placeholder="Unit Price" /> 
            </div>
            <label class="error" for="add_item_unit_price" id="add_item_unit_price_error">This field is required.</label>
            <label class="error" for="add_item_unit_price" id="add_item_unit_price_error2">This field must be a price!</label>

            <br />
            <button class='add_item_btn'>Add Item</button>
          </div>

          <div id='message'>
            message here
          </div>

    </div>  
</form>

Answer 1

你的return false;功能太高了。在Javascript中，没有任何内容在return语句下面运行。此外，由于所有return false;语句都处于条件状态，因此它们有可能永远不会运行，并且在AJAX调用有机会完成之前浏览器会重定向。

Answer 2

感谢Barmar找到了解决方案。

我需要添加

return false;

到点击功能的结尾。

JQ / JS已编辑

$(function() {
  $('.error').hide();
  $(".add_item_btn").click(function() {
    // validate and process form here

    $('.error').hide();
    var itemTitle = $("input#add_item_item_title").val();
      if (itemTitle == "") {
      $("label#add_item_item_title_error").show();
      $("input#add_item_item_title").focus();
      return false;
    }

    //var groupID = $("input#add_item_unit_price").val();  
    var groupID = $("select#add_item_groupid option").filter(":selected").val();

    var unitPrice = $("input#add_item_unit_price").val();

    if (unitPrice == "") {
    $("label#add_item_unit_price_error").show();
    $("input#add_item_unit_price").focus();
    return false;
    }

    if (isNaN(unitPrice)) // this is the code I need to change
    {
        //alert("Must input numbers");
        $("label#add_item_unit_price_error2").show();
        return false;
    }

    var dataString = 'itemTitle='+ itemTitle  + '&groupID=' + groupID + '&unitPrice=' + unitPrice;
    //alert (dataString);return false;

    //add_item();
    nu();

    return false; // <-- added this


    });
    });

Jquery ajax html返回不起作用

2 个答案: