Jquery ajax html返回不工作

Question

我已经写了这些100多次...所以提前原谅我的愚蠢。

简单的AJAX - > PHP - > 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

感谢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 


    }); 
    }); 

Answer 2

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