时间戳

首页 > 解决方案 > 无法使用 jQuery Ajax Bootstrap 模型从数据库中获取更新数据的值 - json 数据

javascript - 无法使用 jQuery Ajax Bootstrap 模型从数据库中获取更新数据的值 - json 数据

问题描述

安慰我的主要问题是我的模式正在显示，但警报正在显示 [object Object]。我有四个表，例如 stud、country_master_academic、master_city 和 master_state。当我单击编辑时，会出现模式，但从数据库中获取的数据没有显示在其中。

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>';

标签： javascriptphpjqueryajax

解决方案

如下更改您的 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]);

推荐阅读