通過ajax獲取輸入字段的值，然后將其傳遞給php

Question

我是ajax的新手，有人希望我幫助我創建一個包含輸入字段的表單。

每當我單擊按鈕時，我都會獲取輸入字段的值，並將其聲明為AJAX中的數據，並將來自ajax的值傳遞給PHP腳本。 它將顯示一個表格。

我的問題是如何獲取輸入字段的值並將其聲明為AJAX中的數據。 單擊后，該表將在AJAX腳本中成功聲明，該腳本將顯示一個表。

先感謝您

更新：

@J_D，這是我的表單的html代碼：

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
            <table cellpadding="15px">
                <tr>
                    <td>Transmittal #</td>
                    <td><input type="text" class="form-control" style="padding-left:5px;" name="transmittal_number_inquiry" id="transmittal_number_inquiry" class="transmittal_number_inquiry" onKeyPress="return isNumberKey(event)" required></td>
                </tr>
            </table>
            <div style="float:right; padding-right:110px; padding-top:10px;">
                <a href="#modalTransmittalInquiry" class="btn btn-info" data-toggle="modal" id="btn-inquire-transmittal-number" data-backdrop="false" name="inquire-transmittal-number">Inquire</a>
                <?php /*?><input type="submit" class="btn btn-info" data-toggle="modal" id="btn-inquire-transmittal-number" name="btn-inquire-transmittal-number" data-backdrop="false" value="Inquire"><?php */?>
                <?php /*?><button type="submit" class="btn btn-info" data-toggle="modal" id="btn-inquire-transmittal-number" name="btn-inquire-transmittal-number" data-backdrop="false">Inquire</button><?php */?>
            </div>
        </form>

這是我的AJAX代碼：

$(document).ready(function(){
   $('.btn-inquire-traensmittal-number').click(function(){
    $inputtextval = $('#transmittal_number_inquiry').val();
    $.ajax({
        type: 'POST',
        url: getTransmittalNum.php,
        data: {'transmittal_number_inquiry' : $inputtextval},
        success: function(res){
        }
    });
  });
});

這是getTransmittalNum.php代碼

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "etransmittal";

    $selectedTransmittal = $_GET['q'];
    $con = mysqli_connect($servername,$username,$password,$dbname);

    if(!$con){
        die("Connection failed: " . mysqli_connect_error());
    }

    if(isset($_POST['inquire-transmittal-number'])){
        $query = "SELECT en.transid, en.transdate, CONCAT(userlist.lname, ', ', userlist.fname, ' ', userlist.mname) AS sender_name,
                    userlist.`department`, en.document_number, doctype.document_type, doctype.document_description, vendor.`vendor_name`, en.`remarks`, 
                    en.status_id, stat.status_name, en.total_amount
                    FROM tbl_encode_transmittal en
                    LEFT JOIN tbl_vendor vendor ON vendor.`vendor_id` =  en.vendor_id
                    LEFT JOIN tbl_doctype doctype ON doctype.`doc_id` = en.doctype_id
                    LEFT JOIN tbl_userlist userlist ON userlist.userid = en.sender_id
                    LEFT JOIN tbl_userlist userlist1 ON userlist1.userid = en.`receiver_id`
                    LEFT JOIN tbl_status stat ON stat.status_id = en.status_id
                    WHERE en.`transid` = '{$_POST['transmittal_number_inquiry']}'";

        $result = mysqli_query($con, $query);
        $rows = array();

        if($result){
            while($row = mysqli_fetch_assoc($result)){
                $rows[] = $row;
            }
        }
        else{
            echo 'MYSQL Error: ' . mysqli_error();
        }

        $json = json_encode($rows);
        echo $json;
        mysqli_close($con);
    }
?>

Answer 1

嘗試以下代碼：

$(document).ready(function(){
  $('#btn-inquire-transmittal-number').click(function(){
    $inputtextval = $('#transmittal_number_inquiry').val();
    $.ajax({
      type: 'POST',
      url: 'getTransmittalNum.php', // wrap code with quote
      data: {'transmittal_number_inquiry' : $inputtextval},
      dataType : 'json', // expecting result type json
      success: function(res){
        // once you got result,
        // populate table here
      }
    });
  });
});

PHP

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "etransmittal";

//$selectedTransmittal = $_GET['q']; //<---- u need this?????
$con = mysqli_connect($servername,$username,$password,$dbname);

if(!$con){
    die("Connection failed: " . mysqli_connect_error());
}

if(isset($_POST['transmittal_number_inquiry'])){ // <-- check for existence
    $query = "SELECT en.transid, en.transdate, CONCAT(userlist.lname, ', ', userlist.fname, ' ', userlist.mname) AS sender_name,
                userlist.`department`, en.document_number, doctype.document_type, doctype.document_description, vendor.`vendor_name`, en.`remarks`, 
                en.status_id, stat.status_name, en.total_amount
                FROM tbl_encode_transmittal en
                LEFT JOIN tbl_vendor vendor ON vendor.`vendor_id` =  en.vendor_id
                LEFT JOIN tbl_doctype doctype ON doctype.`doc_id` = en.doctype_id
                LEFT JOIN tbl_userlist userlist ON userlist.userid = en.sender_id
                LEFT JOIN tbl_userlist userlist1 ON userlist1.userid = en.`receiver_id`
                LEFT JOIN tbl_status stat ON stat.status_id = en.status_id
                WHERE en.`transid` = '{$_POST['transmittal_number_inquiry']}'";

    $result = mysqli_query($con, $query);
    $rows = array();

    if($result){
        while($row = mysqli_fetch_assoc($result)){
            $rows[] = $row;
        }
    }
    else{
        echo 'MYSQL Error: ' . mysqli_error();
    }

    $json = json_encode($rows);
    echo $json;
    mysqli_close($con);
}
?>