php - Sql INNER JOIN 无法正常工作，如何使用 Jquery/Ajax 在 html 表单上显示上传的文件

Question

我想使用 SQL INNER JOIN 从 2 个表中获取结果，但它只显示第一个结果而不显示其他结果。如果我选择其他数据，则会显示以下错误消息:

Warning: Invalid argument supplied for foreach() in D:\software installed\xampp\htdocs\contact-management\getContactDetails.php on line 14
[]

我的功能描述:

我的数据库中有 2 个表。

1. 联系方式:

   cdid, family_name, given_name, work_phone, mobile_phone, email, email_private, cid
   

2. contact_docs:

   docid, cdid, file_name, file_des
   

我正在显示数据库中的所有联系人(仅 family_name)。选择每个联系人后，它会使用 Jquery/ajax 显示/加载所有联系人详细信息，这些详细信息显示在HTML 表单上。现在它在 html 输入类型 = 文本字段上显示 contact_details 数据。但我还需要显示 contact_docs 数据，它实际上是文件。

因此，当我使用 jQuery/ajax 向服务器发送请求时，我必须使用 SQL 内部联接查询根据 id (cdid) 从两个表中获取结果。但不幸的是我的内部联接查询无法正常工作。如果我选择不同的联系人，它不会在 html 表单上显示所有联系人详细信息数据。仅显示第一个结果。

我的问题是:

1. 如何修复此内部联接查询？

2. 当整个表单加载了 2 个表中的所有数据时，如何在表单上显示上传的文件(文件链接更好)？

注意:我可以成功编辑/将数据插入数据库，但在使用文件显示数据时出现问题。

这是我的代码:

Html页面:

<div id="showContactsDetails">
<h2>Individual Record Details</h2>
    <div style=" visibility:hidden;" id="visiable">    
    <span class="mandatory"><sub>* Required</sub></span>
    <!--success update -->  
    <div id="success"></div>

<form action="" method="post" enctype="multipart/form-data" id="all_contact_details">
<table width="450" border="0" cellspacing="0" cellpadding="0">  
  <input type="hidden" name="cdid" id="cdid"/>
  </tr>     
<tr>
    <td>Company Name</td>
    <td><input type="text" name="company_name" id="company_name" disabled="disabled"/></td>
  </tr>
  <tr>
    <td>Family name</td>
    <td><input type="text" name="family_name" id="family_name"/></td>
  </tr>
  <tr>
    <td>Given name</td>
    <td><input type="text" name="given_name" id="given_name"/></td>
  </tr>
  <tr>
    <td>Work Phone</td>
    <td><input type="text" name="work_phone" id="work_phone"/></td>
  </tr>
  <tr>
    <td>Mobile Phone</td>
    <td><input type="text" name="mobile_phone" id="mobile_phone"/></td>
  </tr>
  <tr>
    <td>Email address</td>
    <td><input type="text" name="email" id="email"/></td>
  </tr>
  <tr>
    <td>Private email address</td>
    <td><input type="text" name="email_private" id="email_private"/></td>
  </tr>
  <tr>
    <td>Upload your document</td>
    <td><input type="text" name="file_des_1" id="file_des1" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input name="file1" type="file" id="file" class="file"/></td>
    <span class="file_des_1"></span>
  </tr>

  <tr>
    <td></td>
    <td><input type="text" name="file_des_2" id="file_des2" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input type="file" name="file2" id="file_2" class="file"/></td>
  </tr>

  <tr>
    <td></td>
    <td><input type="text" name="file_des_3" id="file_des3" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input type="file"  name="file3" id="file_3" class="file"/></td>
  </tr>

  <tr>
    <td></td>
    <td><input type="text" name="file_des_4" id="file_des4" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input type="file"  name="file4" id="file_4" class="file"/></td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td><input type="button" name="submit" value="Update Details" class="submit" id="upload"/></td>
  </tr>  
</table>
</form> 
</div> 
</div><!--showContactsDetails-->

jQuery/Ajax 页面:

//edit the form....................
<script>
$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);


    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
            $("#success").html(data);
            document.getElementById("all_contact_details").reset();


        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});    

//load the html form with all contact details..................................................
function getDetails(id) {
        id = id;        
        $.ajax({        
                url: 'getContactDetails.php',
                type: 'post',             
                data: {'id' : id},
                dataType : 'json',
                success: function( res ) {
                    document.getElementById("visiable").style.visibility = "visible";
                    console.log(res);
                    $.each( res, function( key, value ) {
                        console.log(key, value);
                        $('input[type=text][name='+key+']').val(value);
                        $('input[type=hidden][name='+key+']').val(value);
                        $('textarea[name='+key+']').val(value);

                    });

                }            
        });
    }


</script>

PHP 页面(getContactDetails.php):

<?php
ob_start();
require_once("config.php");
$id  = (int) $_POST['id'];

$sql = mysql_query("SELECT contact_details.cdid, contact_details.family_name, contact_docs.file_name FROM contact_details INNER JOIN contact_docs ON contact_details.cdid = contact_docs.cdid WHERE contact_docs.cdid = '$id'");

$res =  mysql_fetch_array($sql);
$data = array();
foreach( $res as $key => $value ) { 
    $data[$key] = $value;   
}
echo json_encode($data);
?>

我是网络开发领域的新手。所以可能是我的代码是错误的，这就是为什么我们非常感谢您的帮助:)

Answer 1

我想你想要这样的东西......(使用已弃用的API)

<?php
require_once("config.php");

$id  = (int) $_GET['id'];

$query = "
"SELECT c.cdid
      , c.family_name
      , d.file_name 
   FROM contact_details c
   JOIN contact_docs d 
     ON c.cdid = d.cdid 
  WHERE d.cdid = $id
";

$result = mysql_query($query);

$data = array();

while ($res =  mysql_fetch_array($result)){
foreach( $res as $key => $value ) {
    $data[$key][] = $value;
}
}
echo json_encode($data);   

?>