PHP: مشكلة إرسال النموذج في Ajax/JSON؟

Question

حاليا لدي الكود التالي:

home.php

<form name='myformname' id='myformid'>
    <input type='text' name='mytext1' value='abc'>
    <input type='text' name='mytext2' value='123'>
    <input type='submit' value='Submit'> 
</form>

<div id='textone'></div><div id='texttwo'></div>

_home.php

$arr = array( 'textone' => $_POST['mytext1'], 'texttwo' => $_POST['mytext2'] );
echo json_encode( $arr );

ajax.js

jQuery('#myformid').live('submit',function(event) {
    $.ajax({
        url: '_home.php',
        type: 'POST',
        data: $('#myformid').serialize(),
        success: function( data ) {
            // TODO: write code here to get json data and load DIVs instead of alert
            alert(data);
        }
    });
    return false;
});

الإخراج عند إرسال:

{"textone":"abc","texttwo":"123"}

سؤال

اريد التحميل mytext1 القيمة في نص div و mytext2 القيمة في texttwo DIV باستخدام بيانات JSON في _home.php

ملحوظة: انا استخدم هذا الجواب للقيام بنفس المهمة في حدث انقر فوق الرابط. ولكن كيف تفعل هذا عند تقديم النموذج؟

شكرًا

Answer 1

هل تريد فقط تحليل json وتعيين divs على القيم التي تحتوي عليها بشكل صحيح؟

var divs = JSON.parse(data);
for (var div in divs) {
  document.getElementById(div).innerHTML = divs[div];
}

(ربما يكون بناء جملة الملصق السابق أشبه بما تتبعه ، وربما يكون أكثر توافقًا في المستعرض ، ولكنه لا يشمل تحليل JSON.)

نظرًا لأن JSON هو مجرد مجموعة فرعية من JavaScript ، يمكنك فقط تقييمها (). Json.Parse () يقوم بذلك بشكل أساسي ، ولكنه يعطيك تأكيدات بأنه إذا كانت "البيانات" تحتوي على بعض التعليمات البرمجية السيئة بدلاً من كائن بسيط ، فلن يتم تقييمه.

Answer 2

في وظيفة النجاح

for (prop in data){
    $('#' + prop).html(data[prop]);
}

Answer 3

ها هو حل JS الكامل الخاص بي:

jQuery('#myformid').live('submit',function(event) {
    $.ajax({
        url: '_home.php',
        type: 'POST',
        dataType: 'json',
        data: $('#myformid').serialize(),
        success: function( data ) {
            for(var id in data) {
                //jQuery('#' + id).html(data[id]); // This will also work
                document.getElementById(id).innerHTML = data[id];
            }
        }
    });
    return false;
});