将从数据库检索到的记录显示到对话框中

Question

我有一个接受数字输入的对话框。我想将此数字发送到数据库并检索与该数字对应的名称并将其显示到另一个对话框中。我的代码在检索数据之前工作正常，但我没有不知道如何将它显示到另一个对话框中。我创建了一个小提琴https://jsfiddle.net/payalsuthar/rdtpo7e3/ 这是dataretrieve.php-

 <?php
    include('db.php');
    $num = $_POST['num'];
    $sql = "SELECT `no`,`name` FROM `table` WHERE `no` = $num ";
     if($result=mysqli_query($conn,$sql)){ 
    //i dont know how to display the values retrieved here into my dialog2(you can check my dialog2)
   }
 ?>

HTML代码-

<form action="dataretrieve.php" method="POST">
<div id="dialog1" title="div1" style="display:none"> 
Enter the num:<input type="text" name="num" id="num" />
</div>
</form>
<button id="clickMe">Click Me</button>
<div id="dialog2" title="div1" style="display:none"> 
num:<input type="text" name="number" id="number" />

JavaScript 代码-

$("#clickMe").click(function(){

$('#dialog1').dialog({
buttons:{
"yes":function(){
$(this).dialog('close');
callback(true);
},
"no":function(){
$(this).dialog('close');
}
}
});
function callback(value){
if(value){
$('#dialog2').dialog({
buttons:{
"ok":function(){
$(this).dialog('close');
},
"cancel":function(){
$(this).dialog('close');
}
}
});
}
}
});

Answer 1

您的代码将如下所示（未经测试）：

jQuery Demo

PHP：使用echo将数据发送回javascript端

<?php
    include('db.php');
    $num = $_POST['number'];
    $sql = "SELECT `no`,`name` FROM `table` WHERE `no` = $num ";
    if($result=mysqli_query($conn,$sql)){ 
        $out = $result['yourDBfieldname'];
        echo $out; //THIS sends it back to javascript side
    }
?>

HTML：无需使用<form> 构造——AJAX 就是您所需要的

<div id="dialog1"> 
    Enter the num:<input type="text" name="num" id="num" />
    <button id="submit1">Submit</button>
</div>
<button id="clickMe">Click Me</button>

JavaScript/jQuery:

var num, nam;
$("#clickMe").click(function(){
    $('#dialog1').dialog('open');
});
$("#submit1").click(function(){
    $('#dialog1').dialog('close');
    num = $('#num').val();
    $.ajax({
        type: 'post',
         url: 'dataretrieve.php',
        data: 'number=' +num,
        success: function(recd){
            //if (recd.length) alert(recd);
            $('#dialog1').html('<input id="name" type="text" value="'+recd+'" /><button id="submit2">Submit</button>');
            $('#dialog1').dialog('open');
        }
    });
});
//Must use .on() because content injected after DOM initially rendered
$(document).on('click', '#submit2', function(){
    $('#dialog1').dialog('close');
    nam = $('#name').val();
    alert('Num: '+num+ '    Name: ' + nam);
});


//Initialize the jQuery dialog - makes the #dialog1 div hidden
$('#dialog1').dialog({
    autoOpen:false,
    modal:true,
    buttons:{
        "Close":function(){
            $(this).dialog('close');
        }
    }
});

---

注意：

不需要两个对话框。您可以通过.html() 方法更改#dialog1 div 中的内容来重复使用一个对话框。