Question

尝试使用JQuery的一个函数实现AJAX。我一直在以各种方式尝试.load（）,. ajax（）或.post（），通过使用Stack Overflow上的一些示例而没有成功。

我有一个表单，它查询oracle DB，并返回另一个表单和结果表。我让它以传统方式使用单独的PHP文件（重新加载整个新页面）。现在我想在没有页面刷新的情况下加载内容。

启动表格PHP（checkin_start.php）：输入条形码并提交......

<div class="content" id="bodyContent">
  <form id="usualValidate" class="mainForm" method="post" action="">
    <label>Barcode:<span>*</span></label>
    <input type="text" class="required" name="startBarcode" id="startBarcode"/>
    <input type="submit" value="submit" class="blueBtn" id="startBtn" />
  </form>
</div>

处理PHP（checkin_process.php）：一个新表单，php函数的查询结果被加载到id =“bodyContent”......

<form id="checkinProcess" class="mainForm" method="post" action="">
  <label>Barcode:<span>*</span></label>
  <input type="text" class="required" name="processBarocdes" id="processBarcodes"/>
  <input type="submit" value="submit" class="blueBtn" id="submitBtn" />
</form>
<!-- Shipment List Table -->
<?php
  // Accept a parameter from #usualValidate form and run query.                 
  $barcode = $_POST['startbarcode'];    
  search_shipped_barcode($barcode);                         
?>

函数PHP（functions.php）：返回结果表...

<?php 
function search_shipped_barcode($barcode){
<--! DB connection & query -->  
  echo "<table>";
    <--! echo table results -->
  echo "</table>";
}
?>

我想无论我选择哪一个，我都可能遇到同样的问题，所以这是我的.post（）尝试。我不太明白如何将表单数据传递给我的php函数并返回数据...

$(document).ready(function() {
  $("#usualValidate").submit(function(sevt) {
    sevt.preventDefault();
    var startBC = $("#startBarcode").val();
    $.post("checkin_process.php",
          {"startBarcode" : "startBC"},
          function(data) {$("#bodyContent").html(data)},
          "html");
  });
});

感谢您的任何见解......

Answer 1

当您使用$ .post时，除非它们是文字，否则不应引用这些值。

试试这个：

$(document).ready(function() {
  $("#usualValidate").submit(function(sevt) {
    sevt.preventDefault();
    var startBC = $("#startBarcode").val();
    $.post("checkin_process.php",
          {startBarcode : startBC},
          function(data) {
            $("#bodyContent").html(data);
           // log the returned data to console for debug 
           console.log(data);
        });
  });
});

Answer 2

在您的javascript文件中，您可以使用post方法，也可以使用下面示例中的ajax发送您的数据：

$.ajax({
    type : 'post',
    url : 'currentphpfile.php',
    //Here is where the data is put
    data : {
        "ajax" : "1",
        "otherData" : "abc"
    },
    success : function(data, textStatus, jqXHR) {
        //Do something with the data here like insert it into the document
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        //Do something to fix the error
    },
    dataType : 'text' //Or automatically parse a json response with 'json'
});

为了实现这个目的，你需要在你的php文件中能够处理这样的请求：

if (!empty($_POST['ajax']) && $_POST['ajax']==1){
    //Do stuff with the other post data
    //Here's how to return the data to your script:
    //If you chose a text response above:
    echo $importantData;
    exit;
    //If you chose json
    echo json_encode(array("title" => $title, "text" => $text /*, etc... */));
}

我还没有测试过这个代码的bug，但你可能已经明白了。

用于表单数据的JQuery .load（）或.ajax（）或.post（）到php函数

2 个答案: