http://www.formget.com/jquery-post-data/

jQuery Ajax Post Data Example


Fugo Of FormGet

jQuery $.post() method is used to request data from a webpage and to display the returned result (sent from requested page) on to that webpage from where the request has been sent without page refresh.

$.post() method sends request along with some data using an HTTP POST request.

Under this, a request is send to a webpage (here it is jquery_post.php) from another page (say jquery_send.php) using syntax :

Syntax:

  1. $.post( URL, data, callback);

Parameters:

  • URL

The URL parameter is defined for the URL of requested page which may communicate with database to return results.

  1. $.post("jquery_post.php",data,callback);
  • data

The data parameter is defined to send some data along with the request.

  1. ,{   // Data Sending With Request To Server
  2. name:vname,
  3. email:vemail
  4. }
  • callback

The callback parameter is defined for a function to be executed if the request gets succeeded. This contains two sub parameters , the first one holds the returned data from the requested page and  second one holds the status of the request.

  1. ,function(response,status){ // Required Callback Function
  2. //"response" receives - whatever written in echo of above PHP script.
  3. alert("*----Received Data----*\n\nResponse : " + response+"\n\nStatus : " + status);
  4. }
Note : Both ‘ data ‘ and  ‘ callback ‘ parameters are optional parameters, whereas URL is mandatory for $.post() method.

Below is our complete code with download and live demo option

DOWNLOAD SCRIPT   LIVE DEMO & GET WP THEME

Example:

The following example uses the $.post() method to send some data along with the request.

This is jquery_send.php page that contains jQuery $.post() method which can be implemented as given below:

  1. <html>
  2. <head>
  3. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
  4. <!-- Include JS File Here -->
  5. <link href="style.css" rel="stylesheet"/>
  6. <!-- Include JS File Here -->
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  8. <script>
  9. $(document).ready(function(){
  10. $("#btn").click(function(){
  11. var vname = $("#name").val();
  12. var vemail = $("#email").val();
  13. if(vname=='' && vemail=='')
  14. {
  15. alert("Please fill out the form");
  16. }
  17. else if(vname=='' && vemail!==''){alert('Name field is required')}
  18. else if(vemail=='' && vname!==''){alert('Email field is required')}
  19. else{
  20. $.post("jquery_post.php", //Required URL of the page on server
  21. { // Data Sending With Request To Server
  22. name:vname,
  23. email:vemail
  24. },
  25. function(response,status){ // Required Callback Function
  26. alert("*----Received Data----*\n\nResponse : " + response+"\n\nStatus : " + status);//"response" receives - whatever written in echo of above PHP script.
  27. $("#form")[0].reset();
  28. });
  29. }
  30. });
  31. });
  32. </script>
  33. </head>
  34. <body>
  35. <div id="main">
  36. <h2>jQuery Ajax $.post() Method</h2>
  37. <hr>
  38. <form id="form" method="post">
  39. <div id="namediv"><label>Name</label>
  40. <input type="text" name="name" id="name" placeholder="Name"/><br></div>
  41. <div id="emaildiv"><label>Email</label>
  42. <input type="text" name="email" id="email" placeholder="Email"/></div>
  43. </form>
  44. <button id="btn">Send Data</button>
  45. </div>
  46. </body>
  47. </html>

And here we have “jquery_post.php” file , which contains following PHP codes, that reads the request, processes it  and return the result.

  1. <?php
  2. if($_POST["name"])
  3. {
  4. $name = $_POST["name"];
  5. $email = $_POST["email"];
  6. // Here, you can also perform some database query operations with above values.
  7. echo "Welcome ". $name ."!"; // Success Message
  8. }
  9. ?>

For more reference you can visit our below link:

Form Submit Without Page Refreshing-jQuery/PHP

Conclusion:

With above tutorial you became familiar with jQuery’s $.post() method. Hope you might have liked it, to learn more & to get more coding tricks keep reading our other blogs.

jQuery Ajax Post Data Example的更多相关文章

  1. JQuery.Ajax()的data参数类型

    假如现在有这样一个表单,是添加元素用的. <form id='addForm' action='UserAdd.action' type='post'> <label for='un ...

  2. jquery ajax中data属性详解

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...

  3. jquery ajax 用 data 和 headers 向 java RESTful 传递参数区别

    jquery 的 ajax 是非常方便的一个函数,记录一下 $.ajax 生成的 http 报文 一.使用 data 传递参数: $.ajax({ url : "webrs/test/add ...

  4. jquery ajax 的data 存表单的值

    jsp <body> <form action="" method="post" id="formid">  < ...

  5. JQuery.Ajax()的data参数传递方式

    最近,新学c# mvc,通过ajax post方式传递数据到controller.刚开始传递参数,controller中总是为null.现记录一下,可能不全,纯粹记个学习日记. 重点在于参数的方式,代 ...

  6. jquery Ajax应用总结

    常见应用: 下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET&quo ...

  7. jQuery AJAX Call for posting data to ASP.Net page ( not Get but POST)

    the following jQuery AJAX call to an ASP.Net page. $.ajax({ async: true, type: "POST", url ...

  8. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  9. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

随机推荐

  1. appIcon

    原文地址:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconM ...

  2. 查看zookeeper管理的solrcloud配置文件

    进入zookeeper/bin目录下 连接zookeeper sh zkCli.sh -server localhost:2181 查看 ls /configs 结果如下 [zk: localhost ...

  3. rootfs注册挂载过程分析

    参考:Linux Filesystem: 解析 Linux 中的 VFS 文件系统机制 主要代码, init_rootfs(); init_mount_tree(); 1.init_rootfs()解 ...

  4. python+selenium 鼠标事件操作

    一.前言 除了可以使用 click( ) 来模拟鼠标的单击操作,现在Web产品中还提供了更丰富的鼠标交互方式,例如鼠标右键.双击.悬停.拖动等功能,在WebDriver中,将这些关于鼠标操作的方法都封 ...

  5. Leetcode 391.完美矩形

    完美矩形 我们有 N 个与坐标轴对齐的矩形, 其中 N > 0, 判断它们是否能精确地覆盖一个矩形区域. 每个矩形用左下角的点和右上角的点的坐标来表示.例如, 一个单位正方形可以表示为 [1,1 ...

  6. [git 学习篇] git remote add origin错误

    http://blog.csdn.net/dengjianqiang2011/article/details/9260435 如果输入$ Git remote add origin git@githu ...

  7. SPOJ QTREE4 Query on a tree IV ——动态点分治

    [题目分析] 同bzoj1095 然后WA掉了. 发现有负权边,只好把rmq的方式改掉. 然后T了. 需要进行底(ka)层(chang)优(shu)化. 然后还是T 下午又交就A了. [代码] #in ...

  8. Java定时器Web(转)

    通过定时器进行任务的执行是比较常见的情况,下面的是个简单的示例: 主要借助于监听器和TimerTask和Timer类进行实现,另外spring提供了定时器的高级实现好像是quarts. package ...

  9. 在线预览Word，Excel

    今天在项目中遇到了在线预览word的需求,经过查阅资料与测试发现可以解决问题,特做记录: 方式: http://view.officeapps.live.com/op/view.aspx?src= s ...

  10. 使用 ftrace 调试 Linux 内核，第1部分

    ftrace 是 Linux 内核中提供的一种调试工具.使用 ftrace 可以对内核中发生的事情进行跟踪,这在调试 bug 或者分析内核时非常有用.本系列文章对 ftrace 进行了介绍,分为三部分 ...