jquery中$.post()方法的简单实例


Posted in Javascript onFebruary 04, 2014

在jqery中有这样一个方法,$.post()下面就这个方法做一个简单的实例:

jQuery.post( url, [data], [callback], [type] ) :
使用POST方式来进行异步请求

参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

1.html页面(index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript" src=\'#\'" /jquery-1.3.2.js"></script>
<script language="javascript">
function checkemail(){  if($('#email').val() == ""){
    $('#msg').html("please enter the email!");
    $('#email').focus;
    return false;
  }
  if($('#address').val() == ""){
    $('#msg').html("please enter the address!");
    $('#address').focus;
    return false;
  }
  ajax_post();
}

function ajax_post(){
  $.post("action.php",{email:$('#email').val(),address:$('#address').val()},
  function(data){
    //$('#msg').html("please enter the email!");
    //alert(data);
    $('#msg').html(data);
  },
  "text");//这里返回的类型有:json,html,xml,text
}
</script>
</head>
<body>
<form id="ajaxform" name="ajaxform" method="post" action="action.php">
    <p>
    email<input type="text" name="email" id="email"/>
    </p>
    <p>
    address<input type="text" name="address" id="address"/>
    </p>
    <p id="msg"></p>
    <p>    
        <input name="Submit" type="button" value="submit" onclick="return checkemail()"/>
    </p>
</form>
</body>
</html>

2.php页面(action.php)
<?php
$email = $_POST["email"];
$address = $_POST["address"];
//echo $email;
//echo $address;
echo "success";
?>

说明:当点击按钮时,注意按钮现在的类型是button.在不使用$.post()方法时,按钮类型是submit,这样submit提交form里的数据,采用post方法传递到页面action.php,这时在页面action.php中就能接受到传过来的数据。当采用$.post方法时,我们在函数ajax_post()方法中其实就是使用了post的方法。(要引用jquery库文件)
Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
layui 监听表格复选框选中值的方法
Aug 15 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 #Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 #Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 #Javascript
解决json日期格式问题的3种方法
Feb 02 #Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 #Javascript
简单的JavaScript互斥锁分享
Feb 02 #Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 #Javascript
You might like
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
itchat接口使用示例
2017/10/23 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
存储过程和函数的区别
2013/05/28 面试题
创立科技Java面试题
2015/11/29 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
政府信息公开实施方案
2014/05/09 职场文书
民主生活会剖析材料
2014/09/30 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技