Php 如何在不刷新页面的情况下显示名称值而不是该值的ID（使用jQuery）

作为参考，我使用的是mySQL数据库。这必须在不刷新页面的情况下完成（因此需要使用AJAX来完成[我使用jQuery实现AJAX函数]）。例如，有一个人有名字和姓氏，他们被分配到至少一份工作或最多两份工作。共有两个表格：

第一个表从作业表中获取id并将其用作外键

表“tbl_人员”：

表“tbl_作业”

我想用tbl_job表中的job_名称显示tbl_person表。到目前为止，php代码本身通过页面刷新正确地显示了这一点。但是，对于我当前的jQuery代码，只显示来自tbl_person的数据

jQuery当前显示内容的示例（例如，使用一个显示所有条目）：

php代码的功能示例/我希望jQuery代码的功能示例（使用一个示例显示所有条目）：

代码的主要部分如下。我想在html表中显示我正在登录到控制台的内容，以便它显示在网页上（请参见上表）：

未包含函数pdo文件（包含db函数）

包含输入数据和显示格式（html结构）的PHP文件： person.php

//below code posts new info to database
<?php
$pdo = new functions();
$getPerson = $pdo->getPerson("");
$PersonList = $pdo->getPersonList();

if(isset($_POST["p_ID"])){
    if($_POST["p_ID"] != ''){
        $pdo->updatePerson($_POST);
    }else{
        $pdo->addPerson($_POST);
    }
exit();
}

if(isset($_GET["id"])) {
    $pdo->deletePerson($_GET["id"]);
}
?>

//html form for entering info (this should pop up with jQuery code when clicking new entry button

<div id="personform" title="Person Form">
<form name="personedit" id="personedit" method="post" action="person.php">
<!--//hidden section for the id to pass for the record update-->
<input name="p_ID" type="hidden" value="" />
<fieldset>
<legend>People</legend>
<table>
    <tr>
        <th><label for="p_firstName">First Name:</label><br /></th>
        <td><input type="text" class="name" name="p_firstName" value="" size="18" maxlength="25"/></td>
        <th><label for="p_lastName">Last Name:</label><br /></th>
        <td><input type="text" class="name" name="p_lastName" value="" size="18" maxlength="25"/></td>
    </tr>
    <tr>
        <th>First Job:</th>
        <td>
            <select name="p_job1" id="job1" class="name">
                <option value=""></option>
                <?php 
                    $getJobs = $pdo->getJobs();
                    foreach($getJobs as $row){  
                        if($row["job_ID"] == $getPerson["p_job1"]){
                            $selected = "selected = selected";
                        }else{
                            $selected = "";
                        }
                        echo "<option value='" . $row['job_ID'] . "' $selected>" . $row['job_name'] . "</option>";
                    }
                ?>                  
            </select>   
        </td>
        <th>Second Job:</th>
        <td>
            <select name="p_job2" id="job2" class="name">
                <option value=""></option>
                <?php 
                    foreach($getJobs as $row){  
                        if($row["job_ID"] == $getPerson["p_job2"]){
                            $selected = "selected = selected";
                        }else{
                            $selected = "";
                        }
                        echo "<option value='" . $row['job_ID'] . "' $selected>" . $row['job_name'] . "</option>";
                    }
                ?>                  
            </select>               
        </td>
    </tr>
</table>           
</fieldset>        
</form>
</div>

/*html code to display the person table data in table format with the job name 
displayed (not the id) */

<a class="add" href="person.php">New Entry</a>

<h1>Person List</h1>
<div class="float-left">
    <table id="tbllist">
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>First Job</th>
            <th>Second Job</th>
            <th colspan="2">Action</th>
        </tr>
    <?php   
        foreach ($PersonList as $row) {
            echo "<tr class='fadeaway" . $row['p_ID'] . "'>";       
            echo "<td><input type='hidden' id='p_lastName".$row['p_ID']."' value='".$row['p_lastName']."'>".$row['p_lastName']."</td>";
            echo "<td><input type='hidden' id='p_firstName".$row['p_ID']."' value='".$row['p_firstName']."'>".$row['p_firstName']."</td>";
            echo "<td><input type='hidden' id='job_Name1".$row['p_ID']."' value='".$row['p_job1']."'>".$row['job_Name1']."</td>";
            echo "<td><input type='hidden' id='job_Name2".$row['p_ID']."' value='".$row['p_job2']."'>".$row['job_Name2']."</td>";
            echo "<td><a href='#' class='edit' id='".$row['p_ID']."'>Edit</a></td>";
            echo "<td><a href='#' class='delete' id='".$row['p_ID']."'>Delete</a></td>";
            echo "</tr>";
        }
    ?>
    </table>
</div>

//下面的代码将新信息发布到数据库
//用于输入信息的html表单（单击new entry按钮时，该表单应与jQuery代码一起弹出
人
名字：

姓氏：

第一份工作：
第二份工作：
/*html代码，以表格格式显示人员表数据和作业名称
显示（不是id）*/
人员名单
姓
名字
第一份工作
第二份工作
行动

Javascript代码的一部分

//此部分位于单独的js文件中
//JavaScript文档
函数（）{
var data=$（$（this.data（'formID'））.closest（“form”）.serialize（）；
if（$（$（this.data（'formID'））.valid（））{
var ID=$（this）.data（'ID'）；//获取要编辑的表行的ID
//此函数用于查找每个输入的类名，以便在“添加”部分中使用
var inputname=$（“.name”）.map（函数（）{
r=$（this.attr（“name”）；
返回r；
}).get（）；
//此函数用于查找每个输入的值，以便在“添加”部分中使用
var inputval=$（“.name”）.map（函数（）{
p=$（this.val（）；
返回p；
}).get（）；
//更改阵列位置以正确打印表格的代码。
/*名称值的AJAX代码（这是需要更改的内容）*/
$.ajax({
url:“person.php”，
键入：“POST”，
数据：数据，
成功：功能（数据）{
},
错误：函数（）{
警报（“对不起，出了问题！”）；
}
});
$.ajax({
“url”：“，
'type'：'POST'，
“数据类型”：“文本”，
“数据”：数据，
“成功”：函数（数据）{
如果（操作==“编辑”）{
var tblval=“”；
//循环输入名称的数量，并为每个名称添加一个表值
对于（i=0；i

---

我对AJAX和jQuery相当陌生，因此其中一些代码可能不是最佳实践。

我编写的代码还有其他问题，但我通过更改此部分解决了这个问题：

var inputval = $(".name").map(function() {
    p = $(this).val();
    return p;
}).get();

为此：

var inputval = $(".name").map(function() {
    if (!$(this).is("select")) {    
        p = $(this).val();
    } else {
        p = $(this).find("option:selected").text();
    }
    return p;
}).get();

---

这是一个巨大的文本墙，你能把它压缩一点吗？如果你已经知道你需要什么，你不需要页面刷新或任何额外的请求。你需要加入作业表，虽然在你最初的查询中，人们只能假设，但是如果你的AJAX加载脚本调用

$pdo->getPerson（$p_ID）

，您应该像对

$pdo->getPersonList（）

一样，将

连接添加到其查询中。我没有费心阅读您的所有代码，但您不应该对调用getPerson函数的url（php文件/路径）执行AJAX GET或POST调用。您可以通过通过检查php文件的访问方式将getPerson插入单独的文件或b），并在满足要求时调用getPerson。如果我使用按钮，我肯定会投票结束这个问题，理由是“不清楚这里问了什么”
+------+-----------+----------+-------+----+------+
| Mike | Jefferson | Mechanic | Clerk |Edit|Delete|
+------+-----------+----------+-------+----+------+

$.ajax({
    url: "person.php",
    type: 'POST',
    data: data,
    success: function (data) {
        console.log($("#job1 option:selected").text());
        console.log($("#job2 option:selected").text());
    },
    error: function () {
        //insert error alert
    }
});

//below code posts new info to database
<?php
$pdo = new functions();
$getPerson = $pdo->getPerson("");
$PersonList = $pdo->getPersonList();

if(isset($_POST["p_ID"])){
    if($_POST["p_ID"] != ''){
        $pdo->updatePerson($_POST);
    }else{
        $pdo->addPerson($_POST);
    }
exit();
}

if(isset($_GET["id"])) {
    $pdo->deletePerson($_GET["id"]);
}
?>

//html form for entering info (this should pop up with jQuery code when clicking new entry button

<div id="personform" title="Person Form">
<form name="personedit" id="personedit" method="post" action="person.php">
<!--//hidden section for the id to pass for the record update-->
<input name="p_ID" type="hidden" value="" />
<fieldset>
<legend>People</legend>
<table>
    <tr>
        <th><label for="p_firstName">First Name:</label><br /></th>
        <td><input type="text" class="name" name="p_firstName" value="" size="18" maxlength="25"/></td>
        <th><label for="p_lastName">Last Name:</label><br /></th>
        <td><input type="text" class="name" name="p_lastName" value="" size="18" maxlength="25"/></td>
    </tr>
    <tr>
        <th>First Job:</th>
        <td>
            <select name="p_job1" id="job1" class="name">
                <option value=""></option>
                <?php 
                    $getJobs = $pdo->getJobs();
                    foreach($getJobs as $row){  
                        if($row["job_ID"] == $getPerson["p_job1"]){
                            $selected = "selected = selected";
                        }else{
                            $selected = "";
                        }
                        echo "<option value='" . $row['job_ID'] . "' $selected>" . $row['job_name'] . "</option>";
                    }
                ?>                  
            </select>   
        </td>
        <th>Second Job:</th>
        <td>
            <select name="p_job2" id="job2" class="name">
                <option value=""></option>
                <?php 
                    foreach($getJobs as $row){  
                        if($row["job_ID"] == $getPerson["p_job2"]){
                            $selected = "selected = selected";
                        }else{
                            $selected = "";
                        }
                        echo "<option value='" . $row['job_ID'] . "' $selected>" . $row['job_name'] . "</option>";
                    }
                ?>                  
            </select>               
        </td>
    </tr>
</table>           
</fieldset>        
</form>
</div>

/*html code to display the person table data in table format with the job name 
displayed (not the id) */

<a class="add" href="person.php">New Entry</a>

<h1>Person List</h1>
<div class="float-left">
    <table id="tbllist">
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>First Job</th>
            <th>Second Job</th>
            <th colspan="2">Action</th>
        </tr>
    <?php   
        foreach ($PersonList as $row) {
            echo "<tr class='fadeaway" . $row['p_ID'] . "'>";       
            echo "<td><input type='hidden' id='p_lastName".$row['p_ID']."' value='".$row['p_lastName']."'>".$row['p_lastName']."</td>";
            echo "<td><input type='hidden' id='p_firstName".$row['p_ID']."' value='".$row['p_firstName']."'>".$row['p_firstName']."</td>";
            echo "<td><input type='hidden' id='job_Name1".$row['p_ID']."' value='".$row['p_job1']."'>".$row['job_Name1']."</td>";
            echo "<td><input type='hidden' id='job_Name2".$row['p_ID']."' value='".$row['p_job2']."'>".$row['job_Name2']."</td>";
            echo "<td><a href='#' class='edit' id='".$row['p_ID']."'>Edit</a></td>";
            echo "<td><a href='#' class='delete' id='".$row['p_ID']."'>Delete</a></td>";
            echo "</tr>";
        }
    ?>
    </table>
</div>

//this section is in a separate js file 
// JavaScript Document
function() {
    var data = $($(this).data('formID')).closest("form").serialize();   

    if($($(this).data('formID')).valid()){  
        var ID = $(this).data('ID'); //gets ID of table row for editing

        //This function finds the class name of each input for use in the add section
        var inputname = $(".name").map(function() {
            r = $(this).attr("name");
            return r;
        }).get();

        //This function finds the value of each input for use in the add section
        var inputval = $(".name").map(function() {
            p = $(this).val();
            return p;
        }).get();

        //code to change array positioning so that the table is printed correctly.


        /*AJAX code for name value (this is what needs to be changed) */
        $.ajax({
            url: "person.php",
            type: 'POST',
            data: data,
            success: function (data) {

            },
            error: function () {
                alert('Sorry, there was a problem!');   
            }
        });

        $.ajax({
            'url': '',
            'type': 'POST',
            'dataType': 'text', 
            'data': data,
            'success': function(data){

                if (action == "edit") {

                    var tblval = "";
                    //loops through the number of input names and adds a table value for each one
                    for (i = 0; i < inputname.length; i++) {
                        console.log(inputval[i]);
                        var val = inputval[i];
                        var tblval = tblval + "<td><input type='hidden' id="+inputname[i]+ID+" value='"+val+"'>"+val+"</td>";
                    }
                    edit = $("#tbllist .fadeaway"+ID+"").html(tblval+"<td><a href='#' class='edit' id='"+ID+"'>Edit</a></td>"+"<td><a href='#' class='delete' id='"+ID+"'>Delete</a></td>");
                }

            }
        });
    }
}

var inputval = $(".name").map(function() {
    p = $(this).val();
    return p;
}).get();

var inputval = $(".name").map(function() {
    if (!$(this).is("select")) {    
        p = $(this).val();
    } else {
        p = $(this).find("option:selected").text();
    }
    return p;
}).get();