การส่งค่าด้วย Ajax จาก input แบบ Array

ตัวอย่าง การรับส่งค่าจากฟอร์ม ที่มี input ในแบบ Array ด้วย Ajax

<form onsubmit="return doAjaxSubmit(this)">
<?php
for ( $i = 0 ; $i < 5 ; $i++ )
{
    echo '<input type="text" name="text[]" value = "ทดสอบ '.$i.'" />';
};
?>
<input type="submit" />
</form>

โค้ดส่วนฟอร์ม ที่สร้าง input ในแบบ Array โดย Input ที่ได้จะอยู่ในรุป text[] โดยเมื่อทำการ Submit ฟอร์ม จะทำการเรียก ฟังก์ชั่น doAjaxSubmit เพื่อทำการส่งค่าด้วย Ajax

<script type="text/javascript">
function Inint_AJAX()
{
    var xmlHttp = null;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        };
    };
    return xmlHttp;
};

function doAjaxSubmit( pForm )
{

    // จัดการรวมผลลัพท์แอเรย์ เข้าเป็น string
    var inputs = pForm.getElementsByTagName( 'input' );
    var qs = Array();
    for ( i = 0 ; i < inputs.length ; i++ )
    {
        if ( inputs[i].type == 'text' )
        {
            qs[i] = inputs[i].name + '=' + inputs[i].value;
        };
    };
    var query = qs.join( '&' ); // ข้อความ query ที่ได้
    var req = Inint_AJAX();
    req.onreadystatechange = function () {
        if ( req.readyState == 4 && req.status == 200 ) {
            alert( req.responseText );
        };
    };
    req.open( "GET", "test.php?" + query , true ); // ส่งค่าด้วย Ajax แบบ GET เท่านั้น
    req.send( null );
    return false;
};
</script>

ส่วน Javascript และ Ajax สำหรับรับ และ ส่งค่า โดยในส่วนแรก จะรับค่าจากฟอร์มออกมาอ่านเป็นรูป string ก่อน โดยผลลัพท์ที่ตัวแปร query สามารถดูได้ด้วยการ alert( query ) ออกมาดูครับ หลังจากนั้นก็ส่งออกด้วย Ajax และรับกลับมา ที่ req.responseText

<?php
    foreach( $_GET[text] as $value )
    {
            echo $value." ";
    };
?>

ส่วนสุดท้าย จะเป็นส่วน ที่รับค่าที่ส่งไป ผมได้จัดการแสดงเฉพาะผลลัพท์เท่านั้นครับ หากต้องการทั้งชื่อ และตัวแปร ให้ลองใช้คำสั้ง print_r( $_GET ) เพื่อดูค่าทั้งหมดที่ส่งมาครับ

ผู้เขียน goragod โพสต์เมื่อ 06 พ.ย. 2551 เปิดดู 19,349 ป้ายกำกับ AjaxForm
^