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 继承详解(四)
Jul 13 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php获得当前的脚本网址
2007/12/10 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
js中判断控件是否存在
2010/08/25 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
js实现交通灯效果
2017/01/13 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
Python socket编程实例详解
2015/05/27 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python中如何进行连乘计算
2020/05/28 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
土木工程实习生自我鉴定
2013/09/19 职场文书
中专毕业个人的自荐信格式
2013/09/21 职场文书
课程设计心得体会
2013/12/28 职场文书
演讲稿的写法
2014/05/19 职场文书
PL350与SW11的比较
2021/04/22 无线电