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:

$.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.

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

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

,{   // Data Sending With Request To Server

name:vname,

email:vemail

}
  • 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.

,function(response,status){ // Required Callback Function

//"response" receives - whatever written in echo of above PHP script.

alert("*----Received Data----*\n\nResponse : " + response+"\n\nStatus : " + status);

}
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:

<html>

<head>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>

<!-- Include JS File Here -->

<link href="style.css" rel="stylesheet"/>

<!-- Include JS File Here -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("#btn").click(function(){

var vname = $("#name").val();

var vemail = $("#email").val();

if(vname=='' && vemail=='')

{

alert("Please fill out the form");

}

else if(vname=='' && vemail!==''){alert('Name field is required')}

else if(vemail=='' && vname!==''){alert('Email field is required')}

else{

$.post("jquery_post.php", //Required URL of the page on server

{ // Data Sending With Request To Server

name:vname,

email:vemail

},

function(response,status){ // Required Callback Function

alert("*----Received Data----*\n\nResponse : " + response+"\n\nStatus : " + status);//"response" receives - whatever written in echo of above PHP script.

$("#form")[0].reset();

});

}

});

});

</script>

</head>

<body>

<div id="main">

<h2>jQuery Ajax $.post() Method</h2>

<hr>

<form id="form" method="post">

<div id="namediv"><label>Name</label>

<input type="text" name="name" id="name" placeholder="Name"/><br></div>

<div id="emaildiv"><label>Email</label>

<input type="text" name="email" id="email" placeholder="Email"/></div>

</form>

<button id="btn">Send Data</button>

</div>

</body>

</html>

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

<?php

if($_POST["name"])

{

$name = $_POST["name"];

$email = $_POST["email"];

// Here, you can also perform some database query operations with above values.

echo "Welcome ". $name ."!"; // Success Message

}

?>

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. spring cloud 学习资源

    1.https://blog.csdn.net/column/details/17737.html 2.https://blog.csdn.net/column/details/15197.html? ...

  2. lfyzoj103 割海成路之日

    问题描述 现在,摆在早苗面前的是一道简单题.只要解决了这道简单题,早苗就可以发动她现人神的能力了: 输出 \[1\ \mathrm{xor}\ 2\ \mathrm{xor} \cdots \math ...

  3. Linux快捷键列表

    Linux快捷键列表 快捷键 功能描述 快捷键 功能描述 control+p 查询命令历史纪录的上一条命令 方向上键 查询命令历史纪录的上一条命令 control+n 查询命令历史纪录的下一条命令 方 ...

  4. python3--__repr＿和__str__会返回字符串表达形式

    __repr＿和__str__会返回字符串表达形式 下一个例子是已经见过的init构造方法和add重载方法,本例也会定义返回实例的字符串表达形式的__repr__方法.字符串格式把self.data对 ...

  5. 牛腩新闻发布系统（一）：SQLHelper重构（一）

    导读:在机房重构的时候,就用到了SQLHelper,但那时候即使把代码反复看了很多遍,也看了注释,还和同学交流,也依然是半懂不懂.现在,我再次用到了SQLhelper这个东西,就来说说SQLHelpe ...

  6. nginx反向代理，负载均衡，动静分离，rewrite地址重写介绍

    一.rewrite地址重写 地址转发后客户端浏览器地址栏中的地址显示是不变的,而地址重写后地址栏中的地址会变成正确的地址. 在一次地址转发过程中只会产生一次网络请求,而一次地址重写产生两次请求. 地址 ...

  7. iOS学习笔记07-运动事件和远程控制

    之前我们已经学习了触摸处理和手势识别,其实这两个同属于iOS事件的触摸事件,今天我们来学习下iOS事件的另外两个事件: 一.运动事件 运动事件,是通过加速器进行触发,和触摸事件一样,继承UIRespo ...

  8. 【Luogu】P2704炮兵阵地（状压DP）

    题目链接 话说还真没见过能影响两行的状压.想了半天想出来f数组再多一维就能表示,但是没想到怎么才能不爆空间…… 也是从这道题里学到的一个妙招. 可以把合法状态存到一个数组里,然后用数组下标来映射状态. ...

  9. 算法复习——LCT（bzoj2049洞穴勘测）

    题目: Description 辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道连 ...

  10. asp.net mvc 页面内容呈现Html.Raw HtmlString

    asp.net mvc 页面内容呈现Html.Raw Html.Raw内容经过页面呈现,不呈现Html标签 @Html.Raw( File.ReadAllText(Server.MapPath(&qu ...