無法使用jQuery Ajax Bootstrap Model從數據庫中獲取更新數據的值-JSON數據

Question

我的主要問題是我的模態正在顯示，但警報正在顯示[object Object]。 我有四個表，如stud，country_master_academic，master_city和master_state。當我單擊edit時，出現模態，但從數據庫中獲取的數據未顯示在其中。

home.php頁面中的jQuery

$(document).ready(function(){
             $(document).on('click', '.edit_data', function(event){
               var stud_no = $(this).attr("id");
               $.ajax({  
                    url:"update.php",  
                    method:"POST",  
                    data:{stud_no:stud_no},  
                    dataType:"json",  
                    success:function(data){  
                    console.log(data);
                    $('#name').val(data.name);
                    $('#mob_no').val(data.mob_no);
                    $('#dob').val(data.dob);
                    $('#add').val(data.add);
                    $('#photo').val(data.photo);
                    $('#gender').val(data.gender);
                    $('#country').val(data.country);
                    $('#state').val(data.state);
                    $('#city').val(data.city);
                    $('#stud_no').val(data.stud_no);
                    $('#update_data_modal').modal('show');  


                    },  
                    });     
                });  
    });

在home.php頁面中更新的模態

<div class="container">
<div class="modal fade" id="update_data_modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-heading" style="margin-top:30px;text-align:center">
                <button class="close" data-dismiss="modal" style="margin-right:20px;font-weight:bold;">x</button>
                <h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span>Update Student</h4>
            </div>
            <div class="modal-body">
            <?php
                $img = "images/".trim($vrow["photo"]);
                echo '<img src='.$img.' class="image" style="margin-left:75%;margin-top:5%;width:120px;height:120px;border:2px solid #bbbbbb;border-radius:10px;">';
                ?>
                <br/>
                <input type="file" name="photo"  style="margin-left:70%;">
                <div class="form-group">
                <form class="form-horizontal" name="form" id="form" method="post" action="<?php $_PHP_SELF?>" enctype="multipart/form-data">
                    <label for="name" id="name"><span class="glyphicon glyphicon-user"></span><b> Student Name: </b></label>
                    <input type="text" class="form-control" name="name" id="name" pattern="[a-zA-Z]{3,}" title="Name should only contain letters and atleast 3 letters" required />
                </div>
                <div class="form-group">
                    <label for="no"><span class="glyphicon glyphicon-phone"></span><b> Mobile No: </b></label>
                    <input type="text" class="form-control" name="mob_no" id="mob_no" pattern="[0-9]{10}" title="Mobile number should be of 10 digits" required />
                </div>
                <div class="form-group">    
                    <label for="dob"><span class="glyphicon glyphicon-calendar"></span><b> Birth Date: </b></label>
                    <input type="date" class="form-control" name="dob" id="dob" required />
                </div>
                <div class="form-group">
                    <label for="add"><span class="glyphicon glyphicon-map-marker"></span><b> Address: </b></label>
                    <textarea rows="4" cols="33" class="form-control" name="add" id="add" required></textarea>
                </div>
                <div class="form-group">
                    <label for="photo"><span class="glyphicon glyphicon-camera"></span><b> Photo: </b></label>
                    <input type="file" name="photo" id="photo" required />
                </div>
                <div class="form-group">
                    <label for="gen"><b> Gender: </b></label>
                    <input type="radio" name="gender" id="gender" value="M" required="required">Male
                    <input type="radio" name="gender" id="gender" value="F" required="required">Female
                </div>
                <div class="form-group">
                    <label for="cntry"><span class="glyphicon glyphicon-map-marker"></span><b> Country: </b></label>
                <select name="country" id="country" class="form-control">
                <option value="0">Select</option>
                    <?php 
                    $country="SELECT * from country_master_academic";
                    $res= $conn->query($country);
                    if($res->num_rows>0){
                        while($row=$res->fetch_assoc()){        
                        if($row["country_name"]==$vcountry or $vrow['country'] == $row["country_code"] )
                        {   
                                echo '<option value='.$row["country_code"].' selected>'.$row["country_name"].'</option>';
                        }
                            else
                            {
                                echo '<option value='.$row["country_code"].'>'.$row["country_name"].'</option>';
                            }
                        }
                    }
                ?>
                </select>

                </div>
                <div class="form-group">
                        <label for="state"><span class="glyphicon glyphicon-map-marker"></span><b> State: </b></label>
                <select name="state" id="state" class="form-control">
                <option value="0">Select</option>
                    <?php 
                    $state="SELECT * from master_state";
                    $res= $conn->query($state);
                    if($res->num_rows>0){
                        while($row=$res->fetch_assoc()){        
                        if($row["state_name"]==$vstate or $vrow['state'] == $row["state_code"] )
                        {   
                                echo '<option value='.$row["state_code"].' selected>'.$row["state_name"].'</option>';
                        }
                            else
                            {
                                echo '<option value='.$row["state_code"].'>'.$row["state_name"].'</option>';
                            }
                        }
                    }
                ?>
                </select>
                    </div>
                <div class="form-group">
                <label for="city"><span class="glyphicon glyphicon-map-marker"></span><b> City: </b></label>
                <select name="city" id="city" class="form-control">
                <option value="0">Select</option>
                    <?php 
                    $city="SELECT * from master_city";
                    $res= $conn->query($city);
                    if($res->num_rows>0){
                        while($row=$res->fetch_assoc()){        
                        if($row["city_name"]==$vcity or $vrow['city'] == $row["city_code"] )
                        {   
                                echo '<option value='.$row["city_code"].' selected>'.$row["city_name"].'</option>';
                        }
                            else
                            {
                                echo '<option value='.$row["city_code"].'>'.$row["city_name"].'</option>';
                            }
                        }
                    }
                ?>
                </select>
                </div>

                <div class="form-group">
                <input type="hidden" name="stud_no" id="stud_no" />  
                    <button type="submit" name="update" id="update" class="btn btn-info">Update</button>
                </div>
                </form>
            </div>
            <div class="modal-footer">
            <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div> 

update.php頁面，但我仍在嘗試獲取數據，因此只編寫了用於從數據庫中選擇記錄的代碼。

我的編輯按鈕一直循環播放

    echo '<td><button name="edit" style="font-weight:bold;" type="submit" id='.$row["stud_no"].' class="btn btn-warning edit_data" data-target="#update_data_modal" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>';

Answer 1

更改您的html，如下所示。

<div class="form-group">
    <label for="gen"><b> Gender: </b></label>
    <input type="radio" name="gender" id="genderMale" value="M" required="required">Male
    <input type="radio" name="gender" id="genderFemale" value="F" required="required">Female
</div>

在您的ajax成功中添加此代碼。

if(data[6] == 'M')
{
    $("#genderMale").prop("checked", true);
} else if(data[6] == 'F') {
    $("#genderFemale").prop("checked", true);
}

對於圖像文件，您可以在html中使用以下內容

<div class="form-group">
    <img id="resultedPhoto">
    <label for="photo"><span class="glyphicon glyphicon-camera"></span><b> Photo: </b></label>
    <input type="file" name="photo" id="photo" required />
</div>

在ajax成功中添加以下代碼

$("#resultedPhoto").attr("src","/path-to-your-folder/" + data[5]);

Answer 2

如快照中所示，您的對象具有數字索引，因此data.photo將不返回任何內容，因為對象中沒有索引photo 。

您可以使用data[5]訪問圖像名稱。

同樣，您可以獲取任何索引值。

喜歡使用名稱而不是使用data.name您需要使用data[1]

因此，您的代碼將如下所示：

$('#name').val(data[1]);
$('#mob_no').val(data[2]);
$('#dob').val(data[3]);
$('#add').val(data[4]);
$('#photo').val(data[5]);

另外，您還為標簽和輸入提供了相同的ID：

<label for="name" id="name">

您需要從所有標簽中刪除ID：

<label for="name">

Answer 3

現在，當我單擊編輯時，模態未打開並且數據庫值變空了另一個jQuery

    $(document).ready(function(){
        $("#form1").submit(function(event){
            event.preventDefault();
            var formData = new FormData(this);
              $.ajax({
                 url:"upresult.php",
                 type:"POST",
                 data:{formData:formData},
                 async:false,
                 success:function(data) {
                   alert(data);
                    location.reload();
                },
                cache:false,
                contentType:false,
                processData:false
            });
         });

    });

upresult.php

    <?php
    include("connection.php");
    if(!empty($_POST)){
    $no=$_POST['stud_no'];
    $name=trim($_POST['name']);
    $mob=trim($_POST['mob_no']);
    $dob=trim($_POST['dob']);
    $add=trim($_POST['add']);
    $photo=trim($_FILES['photo']['name']);
    $gen=trim($_POST['gender']);
    $cn=trim($_POST['country']);
    $st=trim($_POST['state']);
    $ct=trim($_POST['city']);

    $qry="update stud set stud_name='$name',mobile='$mob',dob='$dob',address='$add',gender='$gen',country='$cn',state='$st',city='$ct' where stud_no='$no'";
    $data=mysqli_query($conn,$qry);
    if($data)
    {
        echo '<script language="javascript">';
        echo 'alert("Updated Successfully")';
        echo '</script>';
    }
    else {
        echo '<script language="javascript">';
        echo 'alert("Cannot update record")';
        echo '</script>';
    }
    if(!empty($_FILES['photo']['name'])){
    $qry1= "update stud set photo='$photo' where stud_no='$no'";
    $data1=mysqli_query($conn,$qry1);

    if($data1){
        $target_dir="images/";
            $target_file=$target_dir.basename($_FILES["photo"]["name"]);
            $imageFileType=pathinfo($target_file,PATHINFO_EXTENSION);
            if(move_uploaded_file($_FILES["photo"]["tmp_name"],$target_file)){
                echo '<script language="javascript">';
                echo 'alert("Image upload successfully")';
                echo '</script>';

            }  else {
                echo '<script language="javascript">';
                echo 'alert("Cannot Upload")';
                echo '</script>';
            }
    }
}

}