ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingอยากได้ตัวอย่าง Code PHP + ajax ที่รับค่าจากหน้าเดียวและแสดงผลที่หน้าเดียวคะ
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: อยากได้ตัวอย่าง Code PHP + ajax ที่รับค่าจากหน้าเดียวและแสดงผลที่หน้าเดียวคะ  (อ่าน 4355 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
CherryX
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 48
ออฟไลน์ ออฟไลน์

กระทู้: 2,052



ดูรายละเอียด เว็บไซต์
« เมื่อ: 25 สิงหาคม 2018, 14:51:03 »
สวัสดีคะ อยากได้ตัวอย่าง Code PHP + ajax ที่รับค่าจากหน้าเดียวและแสดงผลที่หน้าเดียวคะ ต้องค้นหาว่าอย่างไรคะ ตัวที่มีอยู่มันชอบตัดเมื่อเจอตัวอักษร & คะ

รบกวนพี่ๆ ด้วยนะคะ  wanwan017
บันทึกการเข้า
***ลายเซ็นสูงเกินขนาด
nscyber
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 50
ออฟไลน์ ออฟไลน์

กระทู้: 1,165



ดูรายละเอียด
« ตอบ #1 เมื่อ: 25 สิงหาคม 2018, 15:39:44 »
ลองทดสอบดูครับ เป้นการใช้คำสั่ง exit ในการหยุดตอน ajax ถาม ระบบจะทำงานก้ต่อเมื่อ isset($_POST['name'])) ครับ

โค๊ด:
<?php
    $data = array();
    if(isset($_POST['name'])) {
        $data[] = 'You entered:' . $_POST['name'];
        exit(json_encode($data));       
    }
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() { 
        $('form').submit(function(e) { 
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#result').html(data);    
            })
        });
    }); 
</script>
</head>

<body>
    <form>
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>
    <div id="result"></div>
</body>

โค๊ด:
ที่มา : https://stackoverflow.com/questions/29051548/ajax-to-php-on-the-same-page
บันทึกการเข้า
thanoo001
ก๊วนเสียว
*

พลังน้ำใจ: 18
ออฟไลน์ ออฟไลน์

กระทู้: 205



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 25 สิงหาคม 2018, 16:27:04 »
แนะนำให้ส่งค่า Method ในรูปแบบ Post ครับ ตัวโค้ด Java ก็ประมาณนี้
โค๊ด:
jQuery.ajax({
	url:'test.php', // ลิ้งค์ที่เราจะทำการ ajax
	dataType:"html", //รูปแบบของ data อาจจะเป็น json ก็ได้
	type:"POST", // ค่าที่ส่งในรูปแบบเมธอดต่างๆ get,post etc..
	data:{ // ตัวแปลที่จะส่ง id:1 ก็คือ $_POST['id'] = 1 ใน php
		id:1,
		action:'test'
	},success:function(data){ // หากสำเร็จ ระบบจะรับค่ามาอยู่ในตัวแปล data
		jQuery('#text1').html(data);
	}
});


อันนี้สำหรับ PHP
โค๊ด:
<?php
if (!isset($_POST['id']) or $_POST['id'] == '') die('access_denied');
$id = $_POST['id'];
// do code
?>
อธิบายตามที่เข้าใจ นะครับ
« แก้ไขครั้งสุดท้าย: 25 สิงหาคม 2018, 16:28:18 โดย thanoo001 » บันทึกการเข้า
อนิเมะ
CherryX
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 48
ออฟไลน์ ออฟไลน์

กระทู้: 2,052



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 25 สิงหาคม 2018, 17:30:23 »
ขอบคุณทั้ง 2 ท่านมากๆคะ  1 ให้ทั้งสองท่าน เลยคะ แต่ งง ของตัวเองทำไมส่งค่าไป แสดงผลที่ไฟล์ 1.php แล้ว ค่า & ตัวนี้ไม่มาด้วคะ มันเป็นการตัดออก   wanwan017

<script language="javascript">
function doajax(mydata){
   var ajax1=createAjax();
   ajax1.onreadystatechange=function(){
      if(ajax1.readyState==4 && ajax1.status==200){
         document.getElementById('myplace').innerHTML=ajax1.responseText;
      }else{
         return false;
      }
   }
   ajax1.open("POST","1.php",true);
   ajax1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   ajax1.send("asin=" document.form1.asin.value "&detail=" document.form1.detail.value "&price=" document.form1.price.value "&catagory=" document.form1.catagory.value "&link=" document.form1.link.value);
}
</script>
บันทึกการเข้า
***ลายเซ็นสูงเกินขนาด
mean
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 121
ออฟไลน์ ออฟไลน์

กระทู้: 1,009



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 25 สิงหาคม 2018, 17:48:55 »
อ้างถึง
<?
// Start Ajax Content
if(isset($_POST['ajax_request']))
{
?>
Hello<br>
This Content from ajax request
<?
} // END AJAX Content
?>
<htm>

<body>
<div id='content'>
Static Content
</div>


<script async="async" type="text/javascript" src="https://cdnjs.cloudflare.com/a...ibs/jquery/3.3.1/jquery.min.js "></script>
<script>
$.post('',{'ajax_request':1},function(response){
  $('#content').html(response);
});
</script>
</bodY
</html>

ใช้ Jquery ช่วยทำงานครับ ลดเวลา ลดขั้นตอน
« แก้ไขครั้งสุดท้าย: 25 สิงหาคม 2018, 17:49:27 โดย mean » บันทึกการเข้า


บริการโดเมน, เว็บโฮสติ้ง, SSL Certificate
บริการ SSL Certificate , HTTPS สำหรับเว็บไซต์
บริการ Web Hosting Free! Domain name ตลอดอายุบริการ
บริการ จดโดเมน, Free DNS Service, Domain Forwarding, จัดการโดเมนได้เอง Domain Control Panel[/direct
nscyber
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 50
ออฟไลน์ ออฟไลน์

กระทู้: 1,165



ดูรายละเอียด
« ตอบ #5 เมื่อ: 25 สิงหาคม 2018, 18:00:31 »
อ้างจาก: CherryX ที่ 25 สิงหาคม 2018, 17:30:23
ขอบคุณทั้ง 2 ท่านมากๆคะ  1 ให้ทั้งสองท่าน เลยคะ แต่ งง ของตัวเองทำไมส่งค่าไป แสดงผลที่ไฟล์ 1.php แล้ว ค่า & ตัวนี้ไม่มาด้วคะ มันเป็นการตัดออก   wanwan017

<script language="javascript">
function doajax(mydata){
   var ajax1=createAjax();
   ajax1.onreadystatechange=function(){
      if(ajax1.readyState==4 && ajax1.status==200){
         document.getElementById('myplace').innerHTML=ajax1.responseText;
      }else{
         return false;
      }
   }
   ajax1.open("POST","1.php",true);
   ajax1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   ajax1.send("asin=" document.form1.asin.value "&detail=" document.form1.detail.value "&price=" document.form1.price.value "&catagory=" document.form1.catagory.value "&link=" document.form1.link.value);
}
</script>



จากที่ผมดูโค้ดน่าจะเป้นการต่อข้อความแล้วมี ตัวแปรแทรก หรือป่าวครับ ถ้าใช่การต่อข้อความของ javascript จะต้องใช้เครื่องหมาย  บวก  ในการเชื่อม
« แก้ไขครั้งสุดท้าย: 25 สิงหาคม 2018, 18:06:02 โดย nscyber » บันทึกการเข้า
CherryX
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 48
ออฟไลน์ ออฟไลน์

กระทู้: 2,052



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 25 สิงหาคม 2018, 19:44:00 »
อ้างจาก: nscyber ที่ 25 สิงหาคม 2018, 18:00:31
อ้างจาก: CherryX ที่ 25 สิงหาคม 2018, 17:30:23
ขอบคุณทั้ง 2 ท่านมากๆคะ  1 ให้ทั้งสองท่าน เลยคะ แต่ งง ของตัวเองทำไมส่งค่าไป แสดงผลที่ไฟล์ 1.php แล้ว ค่า & ตัวนี้ไม่มาด้วคะ มันเป็นการตัดออก   wanwan017

<script language="javascript">
function doajax(mydata){
   var ajax1=createAjax();
   ajax1.onreadystatechange=function(){
      if(ajax1.readyState==4 && ajax1.status==200){
         document.getElementById('myplace').innerHTML=ajax1.responseText;
      }else{
         return false;
      }
   }
   ajax1.open("POST","1.php",true);
   ajax1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   ajax1.send("asin=" document.form1.asin.value "&detail=" document.form1.detail.value "&price=" document.form1.price.value "&catagory=" document.form1.catagory.value "&link=" document.form1.link.value);
}
</script>



จากที่ผมดูโค้ดน่าจะเป้นการต่อข้อความแล้วมี ตัวแปรแทรก หรือป่าวครับ ถ้าใช่การต่อข้อความของ javascript จะต้องใช้เครื่องหมาย  บวก  ในการเชื่อม

asin=" document.form1.asin.value " เป็น 1 ค่า คะ มีทั้งหมด 4 ค่าที่รรับจากหน้านี้คะ  wanwan017
บันทึกการเข้า
***ลายเซ็นสูงเกินขนาด
CherryX
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 48
ออฟไลน์ ออฟไลน์

กระทู้: 2,052



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 25 สิงหาคม 2018, 19:51:16 »
ลองทำแบบโค้ดนี้คะ

<script language="javascript" src="ajax.js"></script>
<script language="javascript">
function doajax(showplace){
    var ajax1=createAjax();
    ajax1.onreadystatechange=function(){
        if(ajax1.readyState==4 && ajax1.status==200){
            document.getElementById(showplace).innerHTML=ajax1.responseText;
        }else{
            return false;
        }
    }
    ajax1.open("POST","data_post.php",true);
    ajax1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax1.send("name=" document.form1.name.value "&email=" document.form1.email.value);
}
</script>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  ชื่อ
  <input name="name" type="text" id="name" />
  อีเมลล์
  <input name="email" type="text" id="email" />
  <input type="button" name="Button" value="Send" onclick="doajax('myplace')" />
</form>
<p id="myplace"></p>

https://www.ninenik.com/forum_view_446_1.html

แต่เครื่องหมาย & โดนตัดคะ  wanwan017
บันทึกการเข้า
***ลายเซ็นสูงเกินขนาด
CherryX
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 48
ออฟไลน์ ออฟไลน์

กระทู้: 2,052



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 25 สิงหาคม 2018, 20:20:26 »
อ้างจาก: nscyber ที่ 25 สิงหาคม 2018, 15:39:44
ลองทดสอบดูครับ เป้นการใช้คำสั่ง exit ในการหยุดตอน ajax ถาม ระบบจะทำงานก้ต่อเมื่อ isset($_POST['name'])) ครับ

โค๊ด:
<?php
    $data = array();
    if(isset($_POST['name'])) {
        $data[] = 'You entered:' . $_POST['name'];
        exit(json_encode($data));       
    }
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() { 
        $('form').submit(function(e) { 
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#result').html(data);    
            })
        });
    }); 
</script>
</head>

<body>
    <form>
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>
    <div id="result"></div>
</body>

โค๊ด:
ที่มา : https://stackoverflow.com/questions/29051548/ajax-to-php-on-the-same-page


แบบนี้ถ้าจะรับ 2 ค่าที่ส่งไปทำยังไงคะ  wanwan017
บันทึกการเข้า
***ลายเซ็นสูงเกินขนาด
nscyber
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 50
ออฟไลน์ ออฟไลน์

กระทู้: 1,165



ดูรายละเอียด
« ตอบ #9 เมื่อ: 25 สิงหาคม 2018, 20:38:26 »
อ้างจาก: CherryX ที่ 25 สิงหาคม 2018, 20:20:26
อ้างจาก: nscyber ที่ 25 สิงหาคม 2018, 15:39:44
ลองทดสอบดูครับ เป้นการใช้คำสั่ง exit ในการหยุดตอน ajax ถาม ระบบจะทำงานก้ต่อเมื่อ isset($_POST['name'])) ครับ

โค๊ด:
<?php
    $data = array();
    if(isset($_POST['name'])) {
        $data[] = 'You entered:' . $_POST['name'];
        exit(json_encode($data));       
    }
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() { 
        $('form').submit(function(e) { 
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#result').html(data);    
            })
        });
    }); 
</script>
</head>

<body>
    <form>
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>
    <div id="result"></div>
</body>

โค๊ด:
ที่มา : https://stackoverflow.com/questions/29051548/ajax-to-php-on-the-same-page


แบบนี้ถ้าจะรับ 2 ค่าที่ส่งไปทำยังไงคะ  wanwan017

อันนี้ผมเอาโค้ดเจ้าของกระทู้มาดัดแปลงตามตัวอย่างนะครับลองกอปไปใส่แล้วรันดูได้เลยนะครับ

โค๊ด:
<?php
    $data = array();
    if(isset($_POST['name'])&&isset($_POST['email'])) {
        $data[] = $_POST['name'];
        $data[] = $_POST['email'];
        exit(json_encode($data));
    }
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() {
        $('#form1').submit(function(e) {
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#name').html(data[0]);
                $('#email').html(data[1]);
            })
        });
    });
</script>
</head>

<body>
    <form method="post" id="form1">
        ชื่อ <input name="name" type="text"/>
        อีเมลล์ <input name="email" type="text"/>
        <input type="submit">
    </form>
    <p id="name"></p>
    <p id="email"></p>
</body>
บันทึกการเข้า
CherryX
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 48
ออฟไลน์ ออฟไลน์

กระทู้: 2,052



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 25 สิงหาคม 2018, 21:26:36 »
อ้างจาก: nscyber ที่ 25 สิงหาคม 2018, 20:38:26
อ้างจาก: CherryX ที่ 25 สิงหาคม 2018, 20:20:26
อ้างจาก: nscyber ที่ 25 สิงหาคม 2018, 15:39:44
ลองทดสอบดูครับ เป้นการใช้คำสั่ง exit ในการหยุดตอน ajax ถาม ระบบจะทำงานก้ต่อเมื่อ isset($_POST['name'])) ครับ

โค๊ด:
<?php
    $data = array();
    if(isset($_POST['name'])) {
        $data[] = 'You entered:' . $_POST['name'];
        exit(json_encode($data));       
    }
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() { 
        $('form').submit(function(e) { 
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#result').html(data);    
            })
        });
    }); 
</script>
</head>

<body>
    <form>
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>
    <div id="result"></div>
</body>

โค๊ด:
ที่มา : https://stackoverflow.com/questions/29051548/ajax-to-php-on-the-same-page


แบบนี้ถ้าจะรับ 2 ค่าที่ส่งไปทำยังไงคะ  wanwan017

อันนี้ผมเอาโค้ดเจ้าของกระทู้มาดัดแปลงตามตัวอย่างนะครับลองกอปไปใส่แล้วรันดูได้เลยนะครับ

โค๊ด:
<?php
    $data = array();
    if(isset($_POST['name'])&&isset($_POST['email'])) {
        $data[] = $_POST['name'];
        $data[] = $_POST['email'];
        exit(json_encode($data));
    }
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() {
        $('#form1').submit(function(e) {
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#name').html(data[0]);
                $('#email').html(data[1]);
            })
        });
    });
</script>
</head>

<body>
    <form method="post" id="form1">
        ชื่อ <input name="name" type="text"/>
        อีเมลล์ <input name="email" type="text"/>
        <input type="submit">
    </form>
    <p id="name"></p>
    <p id="email"></p>
</body>


ว้าวได้แล้ว ขอบคุณมากๆ เลยคะ ขอให้ระบบท่านขายดีเป็นเทน้ำเทท่าเลยนะคะ เดี๊ยวอุดหนุนคะ  wanwan017
บันทึกการเข้า
***ลายเซ็นสูงเกินขนาด
หน้า: [1]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: