简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > php教程 > php手册 > teks badan

Jquery框架下Ajax与PHP数据交换

WBOY
Lepaskan： 2016-06-06 09:52:28
asal
2062 orang telah melayarinya
 　　最近刚刚做了一个小项目，其中用到了大量的Ajax技术。当然了，刚开始用的时候，避免不了出现很多的错误，也走了汗多弯路，这里整理了出来，除了是为了供自己以后开发参考外，也是为了拿出来与大家分享，希望能让初学者少走弯路，也希望能够得到高手的批评与指正。　　

一、前台传递字符串变量，后台返回字符串变量（非json格式）

　　Javascript代码：

　　这里，为了解决Ajax数据传递出现的汉字乱码，在字符串传递之前，使用javascript函数escape()对汉字字符串进行了编码，并且对返回

的字符串使用unescape()函数进行解码，使得汉字得以正常显示。当然了，后台PHP代码也添加了头文件，以保证汉字字符串不会出现乱码。各种后台代码解决

汉字乱码问题的方式如下：

　　PHP:header('Content-Type:text/html;charset=GB2312'); 
　　ASP:Response.Charset("GB2312") 
　　JSP:response.setHeader("Charset","GB2312"); 

<span style="color: #008080;"> 1</span> $(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">var</span> my_data="前台变量"<span style="color: #000000;">;
</span><span style="color: #008080;"> 3</span>     my_data=escape(my_data)+"";<span style="color: #008000;">//</span><span style="color: #008000;">编码，防止汉字乱码</span>
<span style="color: #008080;"> 4</span> <span style="color: #000000;">    $.ajax({
</span><span style="color: #008080;"> 5</span>         url: "ajax_php.php"<span style="color: #000000;">,  
</span><span style="color: #008080;"> 6</span>         type: "POST"<span style="color: #000000;">,
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">        data:{trans_data:my_data},
</span><span style="color: #008080;"> 8</span>         <span style="color: #008000;">//</span><span style="color: #008000;">dataType: "json",</span>
<span style="color: #008080;"> 9</span>         error: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){  
</span><span style="color: #008080;">10</span>             alert('Error loading XML document'<span style="color: #000000;">);  
</span><span style="color: #008080;">11</span> <span style="color: #000000;">        },  
</span><span style="color: #008080;">12</span>         success: <span style="color: #0000ff;">function</span>(data,status){<span style="color: #008000;">//</span><span style="color: #008000;">如果调用php成功    </span>
<span style="color: #008080;">13</span>             alert(unescape(data));<span style="color: #008000;">//</span><span style="color: #008000;">解码，显示汉字</span>
<span style="color: #008080;">14</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">15</span> <span style="color: #000000;">    });
</span><span style="color: #008080;">16</span>     
<span style="color: #008080;">17</span> });
Salin selepas log masuk

　　PHP代码：

<span style="color: #008080;">1</span> <span style="color: #000000;">php
</span><span style="color: #008080;">2</span>     <span style="color: #008080;">header</span>('Content-Type:text/html; charset=gb2312');<span style="color: #008000;">//</span><span style="color: #008000;">使用gb2312编码，使中文不会变成乱码</span>
<span style="color: #008080;">3</span>     <span style="color: #800080;">$backValue</span>=<span style="color: #800080;">$_POST</span>['trans_data'<span style="color: #000000;">];
</span><span style="color: #008080;">4</span>     <span style="color: #0000ff;">echo</span> <span style="color: #800080;">$backValue</span>."+后台返回"<span style="color: #000000;">;
</span><span style="color: #008080;">5</span> ?>
Salin selepas log masuk

显示效果如下图所示：

 

　　

                                                     

 

二、前台传递多个一维数组，后台返回字符串变量（非json格式）

　　Javascript代码：

　　在非json格式下，后台只能返回字符串，如果想后台返回数组，可以采用json格式，在本文的后面会详细介绍。

<span style="color: #008080;"> 1</span> $(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">var</span> my_data=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Array();
</span><span style="color: #008080;"> 3</span>     <span style="color: #0000ff;">var</span> my_data1=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Array();
</span><span style="color: #008080;"> 4</span>     my_data[0]=0<span style="color: #000000;">;
</span><span style="color: #008080;"> 5</span>     my_data[1]=1<span style="color: #000000;">;
</span><span style="color: #008080;"> 6</span>     my_data[2]=2<span style="color: #000000;">;
</span><span style="color: #008080;"> 7</span>     
<span style="color: #008080;"> 8</span>     my_data1[0]=10<span style="color: #000000;">;
</span><span style="color: #008080;"> 9</span>     my_data1[1]=11<span style="color: #000000;">;
</span><span style="color: #008080;">10</span>     my_data1[2]=12<span style="color: #000000;">;
</span><span style="color: #008080;">11</span>     
<span style="color: #008080;">12</span> <span style="color: #000000;">    $.ajax({
</span><span style="color: #008080;">13</span>         url: "ajax_php.php"<span style="color: #000000;">,  
</span><span style="color: #008080;">14</span>         type: "POST"<span style="color: #000000;">,
</span><span style="color: #008080;">15</span> <span style="color: #000000;">        data:{trans_data:my_data,trans_data1:my_data1},
</span><span style="color: #008080;">16</span>         <span style="color: #008000;">//</span><span style="color: #008000;">dataType: "json",</span>
<span style="color: #008080;">17</span>         error: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){  
</span><span style="color: #008080;">18</span>             alert('Error loading XML document'<span style="color: #000000;">);  
</span><span style="color: #008080;">19</span> <span style="color: #000000;">        },  
</span><span style="color: #008080;">20</span>         success: <span style="color: #0000ff;">function</span>(data,status){<span style="color: #008000;">//</span><span style="color: #008000;">如果调用php成功    </span>
<span style="color: #008080;">21</span>             alert(data);
<span style="color: #008080;">22</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">23</span> <span style="color: #000000;">    });
</span><span style="color: #008080;">24</span>     
<span style="color: #008080;">25</span> });
Salin selepas log masuk

　　PHP代码：

<span style="color: #008080;"> 1</span> <span style="color: #000000;">php
</span><span style="color: #008080;"> 2</span>     <span style="color: #008080;">header</span>('Content-Type:text/html; charset=gb2312');<span style="color: #008000;">//</span><span style="color: #008000;">使用gb2312编码，使中文不会变成乱码
</span><span style="color: #008080;"> 3</span>     
<span style="color: #008080;"> 4</span> <span style="color: #008000;">    //读取第一个数组</span>
<span style="color: #008080;"> 5</span>     <span style="color: #800080;">$backValue</span>="trans_data:"<span style="color: #000000;">;
</span><span style="color: #008080;"> 6</span>     <span style="color: #800080;">$trans</span>=<span style="color: #800080;">$_POST</span>['trans_data'<span style="color: #000000;">];
</span><span style="color: #008080;"> 7</span>     <span style="color: #0000ff;">foreach</span>(<span style="color: #800080;">$trans</span> <span style="color: #0000ff;">as</span> <span style="color: #800080;">$value</span><span style="color: #000000;">)
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">    {
</span><span style="color: #008080;"> 9</span>         <span style="color: #800080;">$backValue</span>=<span style="color: #800080;">$backValue</span>." ".<span style="color: #800080;">$value</span><span style="color: #000000;">;
</span><span style="color: #008080;">10</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">11</span>     
<span style="color: #008080;">12</span>     <span style="color: #008000;">//</span><span style="color: #008000;">读取第二个数组</span>
<span style="color: #008080;">13</span>     <span style="color: #800080;">$backValue</span>=<span style="color: #800080;">$backValue</span>." , trans_data1:"<span style="color: #000000;">;
</span><span style="color: #008080;">14</span>     <span style="color: #800080;">$trans</span>=<span style="color: #800080;">$_POST</span>['trans_data1'<span style="color: #000000;">];
</span><span style="color: #008080;">15</span>     <span style="color: #0000ff;">foreach</span>(<span style="color: #800080;">$trans</span> <span style="color: #0000ff;">as</span> <span style="color: #800080;">$value</span><span style="color: #000000;">)
</span><span style="color: #008080;">16</span> <span style="color: #000000;">    {
</span><span style="color: #008080;">17</span>         <span style="color: #800080;">$backValue</span>=<span style="color: #800080;">$backValue</span>." ".<span style="color: #800080;">$value</span><span style="color: #000000;">;
</span><span style="color: #008080;">18</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">19</span>     <span style="color: #0000ff;">echo</span> <span style="color: #800080;">$backValue</span><span style="color: #000000;">;
</span><span style="color: #008080;">20</span> ?>
Salin selepas log masuk

显示效果如下图：

 

三、前台传递多个一维数组，后台返回二维数组（json格式）

　　Javascript代码：

<span style="color: #008080;"> 1</span> $(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">var</span> my_data=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Array();
</span><span style="color: #008080;"> 3</span>     <span style="color: #0000ff;">var</span> my_data1=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Array();
</span><span style="color: #008080;"> 4</span>     my_data[0]=0<span style="color: #000000;">;
</span><span style="color: #008080;"> 5</span>     my_data[1]=1<span style="color: #000000;">;
</span><span style="color: #008080;"> 6</span>     my_data[2]=2<span style="color: #000000;">;
</span><span style="color: #008080;"> 7</span>     
<span style="color: #008080;"> 8</span>     my_data1[0]=10<span style="color: #000000;">;
</span><span style="color: #008080;"> 9</span>     my_data1[1]=11<span style="color: #000000;">;
</span><span style="color: #008080;">10</span>     my_data1[2]=12<span style="color: #000000;">;
</span><span style="color: #008080;">11</span>     
<span style="color: #008080;">12</span> <span style="color: #000000;">    $.ajax({
</span><span style="color: #008080;">13</span>         url: "ajax_php.php"<span style="color: #000000;">,  
</span><span style="color: #008080;">14</span>         type: "POST"<span style="color: #000000;">,
</span><span style="color: #008080;">15</span> <span style="color: #000000;">        data:{trans_data:my_data,trans_data1:my_data1},
</span><span style="color: #008080;">16</span>         dataType: "json"<span style="color: #000000;">,
</span><span style="color: #008080;">17</span>         error: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){  
</span><span style="color: #008080;">18</span>             alert('Error loading XML document'<span style="color: #000000;">);  
</span><span style="color: #008080;">19</span> <span style="color: #000000;">        },  
</span><span style="color: #008080;">20</span>         success: <span style="color: #0000ff;">function</span>(data){<span style="color: #008000;">//</span><span style="color: #008000;">如果调用php成功            </span>
<span style="color: #008080;">21</span>             <span style="color: #0000ff;">var</span> back=""<span style="color: #000000;">;
</span><span style="color: #008080;">22</span>             <span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0;i){
<span style="color: #008080;">23</span>                 <span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> j=0;j<data style="color: #000000;">){
<span style="color: #008080;">24</span>                     back+=" "+i+" 行 "+j+" 列 :"+data[i][j]+" "<span style="color: #000000;">;
</span><span style="color: #008080;">25</span> <span style="color: #000000;">                }
</span><span style="color: #008080;">26</span>                 back+="\n"<span style="color: #000000;">;
</span><span style="color: #008080;">27</span> <span style="color: #000000;">            }
</span><span style="color: #008080;">28</span> <span style="color: #000000;">            alert(back);
</span><span style="color: #008080;">29</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">30</span> <span style="color: #000000;">    });
</span><span style="color: #008080;">31</span>     
<span style="color: #008080;">32</span> });</data>
Salin selepas log masuk

　　PHP代码：

<span style="color: #008080;">1</span> <span style="color: #000000;">php
</span><span style="color: #008080;">2</span>     <span style="color: #008080;">header</span>('Content-Type:text/html; charset=gb2312');<span style="color: #008000;">//</span><span style="color: #008000;">使用gb2312编码，使中文不会变成乱码    </span>
<span style="color: #008080;">3</span>     <span style="color: #800080;">$backValue</span>=<span style="color: #0000ff;">array</span><span style="color: #000000;">();
</span><span style="color: #008080;">4</span>     <span style="color: #800080;">$backValue</span>[0]=<span style="color: #800080;">$_POST</span>['trans_data'<span style="color: #000000;">];    
</span><span style="color: #008080;">5</span>     <span style="color: #800080;">$backValue</span>[1]=<span style="color: #800080;">$_POST</span>['trans_data1'<span style="color: #000000;">];
</span><span style="color: #008080;">6</span>     
<span style="color: #008080;">7</span>     <span style="color: #0000ff;">echo</span> json_encode(<span style="color: #800080;">$backValue</span><span style="color: #000000;">);
</span><span style="color: #008080;">8</span> ?>
Salin selepas log masuk

显示效果如下图：

四、前台传递一维数组和二维数组，后台返回二维数组（json格式）

　　Javascript代码：

<span style="color: #008080;"> 1</span> $(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">var</span> my_data=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Array();
</span><span style="color: #008080;"> 3</span>     <span style="color: #0000ff;">var</span> my_data1=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Array();
</span><span style="color: #008080;"> 4</span>     <span style="color: #0000ff;">var</span> my_data2=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Array();
</span><span style="color: #008080;"> 5</span>     
<span style="color: #008080;"> 6</span>     my_data[0]=0<span style="color: #000000;">;
</span><span style="color: #008080;"> 7</span>     my_data[1]=1<span style="color: #000000;">;
</span><span style="color: #008080;"> 8</span>     my_data[2]=2<span style="color: #000000;">;
</span><span style="color: #008080;"> 9</span>     
<span style="color: #008080;">10</span>     my_data1[0]=10<span style="color: #000000;">;
</span><span style="color: #008080;">11</span>     my_data1[1]=11<span style="color: #000000;">;
</span><span style="color: #008080;">12</span>     my_data1[2]=12<span style="color: #000000;">;
</span><span style="color: #008080;">13</span>     
<span style="color: #008080;">14</span>     my_data2[0]=<span style="color: #000000;">my_data;
</span><span style="color: #008080;">15</span>     my_data2[1]=<span style="color: #000000;">my_data1;
</span><span style="color: #008080;">16</span>     
<span style="color: #008080;">17</span> <span style="color: #000000;">    $.ajax({
</span><span style="color: #008080;">18</span>         url: "ajax_php.php"<span style="color: #000000;">,  
</span><span style="color: #008080;">19</span>         type: "POST"<span style="color: #000000;">,
</span><span style="color: #008080;">20</span> <span style="color: #000000;">        data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},
</span><span style="color: #008080;">21</span>         dataType: "json"<span style="color: #000000;">,
</span><span style="color: #008080;">22</span>         error: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){  
</span><span style="color: #008080;">23</span>             alert('Error loading XML document'<span style="color: #000000;">);  
</span><span style="color: #008080;">24</span> <span style="color: #000000;">        },  
</span><span style="color: #008080;">25</span>         success: <span style="color: #0000ff;">function</span>(data){<span style="color: #008000;">//</span><span style="color: #008000;">如果调用php成功            </span>
<span style="color: #008080;">26</span>             <span style="color: #0000ff;">var</span> back=""<span style="color: #000000;">;
</span><span style="color: #008080;">27</span>             <span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0;i){
<span style="color: #008080;">28</span>                 <span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> j=0;j<data style="color: #000000;">){
<span style="color: #008080;">29</span>                     back+=" "+i+" 行 "+j+" 列 :"+data[i][j]+" "<span style="color: #000000;">;
</span><span style="color: #008080;">30</span> <span style="color: #000000;">                }
</span><span style="color: #008080;">31</span>                 back+="\n"<span style="color: #000000;">;
</span><span style="color: #008080;">32</span> <span style="color: #000000;">            }
</span><span style="color: #008080;">33</span> <span style="color: #000000;">            alert(back);
</span><span style="color: #008080;">34</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">35</span> <span style="color: #000000;">    });
</span><span style="color: #008080;">36</span>     
<span style="color: #008080;">37</span> });</data>
Salin selepas log masuk

　　PHP代码：

<span style="color: #008080;">1</span> <span style="color: #000000;">php
</span><span style="color: #008080;">2</span>     <span style="color: #008080;">header</span>('Content-Type:text/html; charset=gb2312');<span style="color: #008000;">//</span><span style="color: #008000;">使用gb2312编码，使中文不会变成乱码    </span>
<span style="color: #008080;">3</span>     <span style="color: #800080;">$backValue</span>=<span style="color: #0000ff;">array</span><span style="color: #000000;">();
</span><span style="color: #008080;">4</span>     <span style="color: #800080;">$backValue</span>=<span style="color: #800080;">$_POST</span>['trans_data2'<span style="color: #000000;">];    
</span><span style="color: #008080;">5</span>     <span style="color: #800080;">$backValue</span>[2]=<span style="color: #800080;">$_POST</span>['trans_data'<span style="color: #000000;">];    
</span><span style="color: #008080;">6</span>     <span style="color: #800080;">$backValue</span>[3]=<span style="color: #800080;">$_POST</span>['trans_data1'<span style="color: #000000;">];
</span><span style="color: #008080;">7</span>     
<span style="color: #008080;">8</span>     <span style="color: #0000ff;">echo</span> json_encode(<span style="color: #800080;">$backValue</span><span style="color: #000000;">);
</span><span style="color: #008080;">9</span> ?>
Salin selepas log masuk

显示效果如下图：

Label berkaitan：
ajax jquery php 代码 开源 框架 编程 编程语言 软件开发
sumber：php.cn
Artikel sebelumnya：PHP常见面试问题 Artikel seterusnya：php利用缓冲实现动态输出(flush,ob_flush)
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Bagaimana untuk mendapatkan semula nilai baris yang tidak dipilih dalam jadual data HTML menggunakan jquery Saya cuba mendapatkan nilai semua baris di mana butang tidak diklik. Sebagai contoh, apabi...
daripada 2024-04-05 09:26:49
0
1
1418
Perlukan skrip jquery untuk mengalihkan pilihan yang dipilih dari kotak pilihan berdasarkan pemilihan semasa pengguna akhir Saya mempunyai halaman HTML di mana pengguna akhir boleh meletakkan kedudukan item kami me...
daripada 2024-04-04 18:40:04
0
1
3528
Saya telah mencipta elemen dalam CSS tulen melalui penanda halaman. Ia dicipta tetapi tidak kelihatan Kod saya adalah seperti berikut: g=document.createElement('div');g.setAttribute("id&q...
daripada 2024-04-04 17:27:27
0
1
417
Tidak dapat menghantar data borang pada iOS Safari/Firefox Ini berfungsi pada semua platform kecuali Safari/Firefox pada iOS: jQuery("#gform_1&q...
daripada 2024-04-04 12:53:48
0
1
303
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！