1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. </head>
  7. <body>
  8. <h1>ajax 发送post</h1>
  9. 	<input type="text"  value="" placeholder="请输入你爱吃的菜" id='foodText'>
  10. 	<input type="button"  value="ajaxPost请求" id='btnAjax'>
  11. </body>
  12. </html>
  13. <script type="text/javascript">
  14. 	document.querySelector("#btnAjax").onclick = function () {
  15. 		var ajax = new XMLHttpRequest();
  16.  
  17. 		// 使用post请求
  18. 		ajax.open('post','ajax_post.php');
  19.  
  20. 		// 如果 使用post发送数据 必须 设置 如下内容
  21. 		// 修改了 发送给 服务器的 请求报文的 内容
  22. 		// 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
  23. 		ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  24. 		// 发送
  25. 		// post请求 发送的数据 写在 send方法中
  26. 		// 格式 name=jack&age=18 字符串的格式
  27. 		ajax.send('name=jack&age=998');
  28.  
  29. 		// 注册事件
  30. 		ajax.onreadystatechange = function () {
  31. 			if (ajax.readyState==4&&ajax.status==200) {
  32. 				console.log(ajax.responseText);
  33. 			}
  34. 		}
  35. 	}
  36. </script>

　　PHP文件

  1. <?php
  2. 	// 获取 post的数据
  3. 	echo '你'.$_POST['age'].'岁了';
  4.  ?>

　　

ajax原生post请求的更多相关文章

  1. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  2. 解决ajax跨域请求 （总结）

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  3. Ajax原生写法

    用太久JQuery了,别忘了Ajax原生是怎么写的 var Ajax = { get : function (url, callback) { var req = Ajax.getRequest(ca ...

  4. HTML5+AJAX原生分块上传文件的关键参数设置

    processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...

  5. Ajax原生请求和java对象转成json

    \黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day23-资料源码\ajax_code\day23_3 本代码中有模 ...

  6. ajax跨域请求のJSONP

    简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级 ...

  7. 第113天：Ajax跨域请求解决方法

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...

  8. JavaScript AJAX原生写法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

随机推荐

  1. [BZOJ2982]combination Lucas定理

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2982 $C(N,M)\% P = C(N\% P,M\% P) * C(N/P,M/P)\ ...

  2. Random-数组

    1.能够使用Random生成随机数     1)import java.util.Random;         2)Random r = new Random();       3)r.nextIn ...

  3. CSS3制作的一款按钮特效

    /*.btn { width:230px; height:70px; font-size:70px; font-weight:bold; overflow:hidden; font: "He ...

  4. Prim算法解决最小生成树

    一.最小生成树问题 什么是最小生成树问题?给你一个带权连通图,需要你删去一些边,使它成为一颗权值最小的树. 二.Prim算法 1)输入:输入一个带权连通图,顶点集合V,边集合E 2)初始化:Vnew= ...

  5. 作用域插槽 向父组件传递 <template slot-scope="{ row, index }" slot="dateNo">

    作用域插槽 向父组件传递 <template slot-scope="{ row, index }"  slot="dateNo"> slotTes ...

  6. Hopfield 网络（上）

    讲的什么 这部分主要对 Hopfield 网络作一大概的介绍.写了其模型结构.能量函数和网络的动作方式.主要参考了网上搜到的一些相关 PPT.   概述 早在 1982 年,Hopfield 发表的文 ...

  7. Mac如何让调整窗口大小更简单

    在使用Mac的时候,你能把鼠标的光标悬停在任何程序的边缘,当光标自动变成箭头样式后,按住鼠标左键你将能随意拖动来改变程序窗口的大小.但是,这里有个问题,我们有时候很难控制把鼠标光标移动在正确的窗口边缘 ...

  8. OpenCV2:第十一章 图像转换

    一.简介 二.例子 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #inclu ...

  9. Python IDE推荐

    八个最佳Python IDE 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs Python是一种功能强大.语言简洁的编程语言.本文向大家推荐8个适合pyt ...

  10. EXTJS中文乱码

    在<head>中加入 <meta http-equiv="Content-Type" content="text/html; charset=GB231 ...