JQuery .load() 或 .ajax() 或 .post() 用于将表单数据发送到 php 函数

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);                         
?>

Functions 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... */));
}

我还没有测试过这段代码的错误，但你可能明白了。