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

Question

我有一个接受数字输入的对话框。我想将此数字发送到数据库并检索与该数字对应的名称并将其显示到另一个对话框中。我的代码在检索数据之前工作正常，但我不这样做不知道如何将其显示到另一个对话框中。我创建了一个 fiddle 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');
        }
    }
});

<小时/>

注意:

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