我们如何使用 ajax 从 PHP 的数据库中获取数据并显示在输入类型的值中？

Question

我正在使用两个 forms，如果用户提交第一个表单，则使用 ajax 将数据插入到数据库中，并且用户被重定向到第二个表单（Forms 都在同一个文件中）。 当出现在第二个表单上的用户按下返回按钮时，form1 的输入类型文本上的值将从用户提交第一个表单时存储的 db 中获取。 我的疑问是我们如何将值从 ajax 调用传递到输入类型文本这是我到目前为止所做的代码

//Form 1
<form  id="titlechange">
<div id="step1">
<input type="text" name="tbl_title" id="title" value="" class="form-control">
 <input type="text" name="tbl_description" id="description" value="" class="form-control">    
  <button type="button" onclick="addTitle()" name="firstsubmit" class="update-btn" >Next</button>                                                
</div>
</form>
//Form 2
<form  id="detailsubmit">
<div id="step2">
<div class = "data"> //input type hidden retreived after submitting from 1 inside class data
<input type="hidden"  value="<?php echo $insertData  ?>" class="form-control">
</div>
<input type="text" name="city" id="city" value="" class="form-control">
 <input type="text" name="state" id="state" value="" class="form-control">    
  <button type="button" onclick="addTitle()" name="firstsubmit" class="update-btn" >Next</button>   
<button type="button" onclick="editModeForStep1()" name="firstsubmit" class="update-btn" >Back</button>                                                
</div>
</form>

Ajax 呼叫后退按钮

   function editModeForStep1()
{
  var formData = new FormData($('#detailsubmit')[0]);
             formData.append('action', 'retreive');
    $.ajax({
                 method: 'post',
                 processData: false,
                 contentType: false,
                 cache: false,
                 enctype: 'multipart/form-data',
                 url: 'ClientData.php',
                         data: formData,
         
                      success:function(msg){
//what should be written here for displaying value received from `ClientData.php` to value attribute of input type text in form 1 
              $('#step1').addClass('in active');
            alert('success');                     
                     
                 }
             });
}

ClientData.php

 if(isset($_POST["action"]) && $_POST["action"]=="retreive"){
   
   $insertData = $_POST['insertdata'];
   $slideOne = $objMaster->getSlideForEdit($insertData);
   foreach($slideOne as $key=>$value)
   {
    echo   $title = $value['title'];
      echo $description = $value['description'];
   }
             
   }

Answer 1

首先，让我们更改ClientData.php以以更可用的形式返回数据。

if(isset($_POST["action"]) && $_POST["action"]=="retreive"){

    $insertData = $_POST['insertdata'];

    //select first row of results for getSlideForEdit by adding `[0]`
    $slideOne = $objMaster->getSlideForEdit($insertData)[0];
    
    //notice array keys match form1 form elements ID
    //notice there is no need for a loop here
    echo json_encode(
        array(
            'title' => $slideOne['title'], 
            'description' => $slideOne['description']
        )
    );

    //if you want to update EVERYTHING from $slideOne, you can just do
    //echo json_encode($slideOne);
    //instead of the above json_encode()

}

现在我们的返回将包含 JSON 数据而不是纯字符串。 我们可以更新您的success方法来更新那些输入框。

...
data: formData,

//set dataType to json because we are receiving json from the server
dataType: 'json',
success:function(msg){
    $('#step1').addClass('in active');
    
    //if you don't set dataType to json you can also do
    //msg = JSON.parse(msg);

    //loop through returned array.
    $.each(msg, function(index, value) {
        
        //select element by index e.g `#title`, set value
        $('#' + index).val(value);
    });

    alert('success');                     
}

只要您从服务器返回一个key=>value对，此解决方案就会动态更新您页面上的任何输入。