如何在jquery中解碼/分離php編碼的json。

Question

我想將我編碼的json解碼為jquery並將所有分隔的代碼設置為不同的表單元素。 在這里，我發布我的所有代碼。

php代碼..

<?php
    if(isset($_POST['passid']) === true && empty($_POST['passid'])=== false)
{
    //$q = $_POST['increament'];[![enter image description here][1]][1]
    mysql_connect('localhost','root', '');
    mysql_select_db('kmk_inst');
    $query = mysql_query("select Q_Id, QP_Name, Question from question_paper where Q_Id = '".mysql_real_escape_string(trim($_POST['passid']))."'")
    or die("Wrong Query".mysql_error());
    //echo (mysql_num_rows($query) !== 0) ? mysql_result($query, 0 , 'QP_Name'): 'passid not found';
    //$row = mysql_fetch_array($query);

    if ( mysql_num_rows($query) !== 0 ) {
        $data = json_encode(mysql_fetch_assoc($query));
        echo $data;
    }
?>

HTML代碼

<a class="btn btn-primary col-xs-12 col-lg-2" style="float: right; margin:10px;" id="savenext" name="savenext" onclick="return dataPass()">Save & Next</a></span>
<input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="ques" value="1" name="ques" />
<input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="QPt" value="1" name="QPt" />

** jquery **

$('a#savenext').on('click',function(){
var passid = $('input#ques').val();
//var name = $('input#QPt').val();
if($.trim(passid) != '')
{
        $.post('retrivedata.php', { passid: passid}, function(data){

            //$.each(data, function(i, name) {
            //      alert(name.Q_Id);
            //});
            $('div#datatable').text(data);
            //$('input#QPt').text(QPt);
        });
    }
});

我是jquery Ajax和JavaScript的新手，所以我無法處理它。 任何幫助欣賞。

目前我得到的結果是這樣的。

Answer 1

在php中設置正確的標題

header('Content-Type: application/json');
$data = json_encode(mysql_fetch_assoc($query));

jquery將負責解析

要將數據添加到您的頁面，請使用append

      $('body').append('<form><p>'+data.Question+'<input value="'+data.QP_Name+'"></from>');

 var data = { "Q_Id": "1", "QP_Name": "test1", "Question": "Which is indian capital.?" }; $('#ques').val(data.Question); $('#QPt').val(data.QP_Name); $('body').append('<form><p>' + data.Question + '<input value="' + data.QP_Name + '"></from>'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="btn btn-primary col-xs-12 col-lg-2" style="float: right; margin:10px;" id="savenext" name="savenext" onclick="return dataPass()">Save & Next</a></span> <input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="ques" value="1" name="ques" /> <input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="QPt" value="1" name="QPt" /> 

Answer 2

將json設置為ajax調用返回的數據類型，如下所示：

$('a#savenext').on('click',function(){
var passid = $('input#ques').val();
//var name = $('input#QPt').val();
if($.trim(passid) != '')
{
        $.post('retrivedata.php', { passid: passid}, function(data){

            //$.each(data, function(i, name) {
            //      alert(name.Q_Id);
            //});
            $('div#datatable').text(data);
            //$('input#QPt').text(QPt);
        },'json');
    }
});

Answer 3

$('a#savenext').on('click',function(){
  var passid = $('input#ques').val();

if($.trim(passid) !=)
{
    $.post('retrivedata.php', {passid: passid}, function(data){          

        var da = JSON.parse(data);              
        $('div#datatable').text(da.QP_Name);            
        //alert(da.QP_Name);             
    });

  }
});