1 <!DOCTYPE html>
2 <htmllang="en">
3 <head>
4 <metacharset="UTF-8"/>
5 <title>Document</title>
6 </head>
7 <body>
8 姓名：<inputtype="text"name="user">
9 年龄：<inputtype="text"name="age">
10 <inputtype="button"value="输入">
11 <divstyle="border:1px solid red;padding:30px">
12 <h2>你的信息：</h2>
13 <p>XXX</p>
14 <p>XXX</p>
15 </div>
16 </body>
17 <scripttype="text/javascript"src=""></script>
18 <scripttype="text/javascript">
19 var $btn = $（"input[type=button]"）;
20 var $input = $（"input[type=text]"）;
21 var $p = $（"p"）;
22 $btn.on（"click",function（）{
23 $.ajax（{
24 type:"get",// 请求方式；
25 url:"1-jq-ajax-get.php",// 连接服务器数据地址；
26 data:{name:$input.eq（0）。val（）， age:$input.eq（1）。val（）},// 传输的数据
27 dataType:"json",//传过来的数据类型
28 success:function（data）{
29 console.log（data）;//成功的时候
30 $p.eq（0）。text（data.name）;
31 $p.eq（1）。text（data.age）;
32 },
33 error:function（）{
34 // 传输失败
35 console.log（"请求失败！"）;
36 }
37 }）;
38 }）;
39 </script>
40 </html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery