jQuery post数据给php的代码例子

1、index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE HTML>
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8"  />
< title >Untitled Document</ title >
< script  src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js" ></ script >
< script  language = "javascript" >
function checkemail(){
   if($('#email').val() == ""){
     $('#msg').html("请输入E-Mail邮箱!");
     $('#email').focus;
     return false;
   }
   if($('#address').val() == ""){
     $('#msg').html("请输入家庭住址!");
     $('#address').focus;
     return false;
   }
   ajax_post();
}
function ajax_post(){
   $.post("action.php",{email:$('#email').val(),address:$('#address').val()},
     function(data){
         $('#msg').html("请输入数据!");
         alert(data);
         $('#msg').html(data);
     },
   "text");//这里返回的类型有:json,html,xml,text
}
</ script >
</ head >
< body >
< form  id = "ajaxform"  name = "ajaxform"  method = "post"  action = "action.php" >
     < p >
     电子邮箱:< input  type = "text"  name = "email"  id = "email" />
     </ p >
     < p >
     家庭住址:< input  type = "text"  name = "address"  id = "address" />
     </ p >
     < p  id = "msg" ></ p >
     < p >    
         < input  name = "Submit"  type = "button"  value = "提交"  onclick = "return checkemail()" />
     </ p >
</ form >
</ body >
</ html >


2、action.php

1
2
3
4
5
6
7
<?php
$email  $_POST [ "email" ];
$address  $_POST [ "address" ];
echo  "你输入的资料为:" ;
echo  "   电子邮箱:$email" ;
echo  "   家庭住址:$address" ;
?>


运行效果:



以下是一个基本的示例,演示如何使用jQuery Mobile下拉框和AJAX从服务器异步检索数据。 HTML代码: ```html <!DOCTYPE html> <html> <head> <title>jQuery Mobile 下拉框异步获取数据示例</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>下拉框异步获取数据示例</h1> </div> <div data-role="main" class="ui-content"> <label for="select-choice-1" class="select">选择一个城市:</label> <select name="select-choice-1" id="select-choice-1"> <option value="">请选择...</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> <div id="result"></div> </div> <div data-role="footer"> <h4>版权所有 © 2021</h4> </div> </div> <script> $(document).on("pagecreate", function() { $("#select-choice-1").on("change", function() { var cityId = $("#select-choice-1").val(); $.ajax({ url: "getdata.php", type: "POST", data: { city_id: cityId }, dataType: "html", success: function(data) { $("#result").html(data); } }); }); }); </script> </body> </html> ``` JavaScript代码: ```javascript $(document).on("pagecreate", function() { $("#select-choice-1").on("change", function() { var cityId = $("#select-choice-1").val(); $.ajax({ url: "getdata.php", // 服务器端处理程序的URL地址 type: "POST", // 请求方式 data: { city_id: cityId }, // 发送到服务器端的数据 dataType: "html", // 服务器端返回的数据类型 success: function(data) { // 成功返回数据后的回调函数 $("#result").html(data); // 将返回的数据显示在页面上 } }); }); }); ``` PHP代码(getdata.php): ```php <?php if(isset($_POST['city_id'])) { $cityId = $_POST['city_id']; if($cityId == '1') { echo '<p>您选择了北京。</p>'; } else if($cityId == '2') { echo '<p>您选择了上海。</p>'; } else if($cityId == '3') { echo '<p>您选择了广州。</p>'; } else if($cityId == '4') { echo '<p>您选择了深圳。</p>'; } } ?> ``` 在这个示例中,我们创建了一个简单的HTML页面,其中包含一个下拉框和一个用于显示结果的div元素。当用户选择下拉框中的选项时,我们使用jQuery的AJAX函数从服务器异步检索数据,并将结果显示在页面上。 请注意,我们使用了jQuery的on()函数来监听页面创建事件,以便在页面加载时绑定事件处理程序。在事件处理程序中,我们使用jQuery的ajax()函数向服务器发送POST请求,并传递所选城市的ID作为数据。 服务器通过检查POST请求中的城市ID参数来确定要返回的数据,然后将数据返回到客户端。在客户端,我们在ajax()函数的成功回调函数中处理返回的数据,并将其显示在页面上。 以上就是一个基本的jQuery Mobile下拉框post异步获取数据例子
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值