ajax原生post请求

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<h1>ajax 发送post</h1>
	<input type="text"  value="" placeholder="请输入你爱吃的菜" id=‘foodText‘>
	<input type="button"  value="ajaxPost请求" id=‘btnAjax‘>
</body>
</html>
<script type="text/javascript">
	document.querySelector("#btnAjax").onclick = function () {
		var ajax = new XMLHttpRequest();

		// 使用post请求
		ajax.open(‘post‘,‘ajax_post.php‘);

		// 如果 使用post发送数据 必须 设置 如下内容
		// 修改了 发送给 服务器的 请求报文的 内容
		// 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
		ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		// 发送
		// post请求 发送的数据 写在 send方法中
		// 格式 name=jack&age=18 字符串的格式
		ajax.send(‘name=jack&age=998‘);

		// 注册事件
		ajax.onreadystatechange = function () {
			if (ajax.readyState==4&&ajax.status==200) {
				console.log(ajax.responseText);
			}
		}
	}
</script>

  PHP文件

<?php
	// 获取 post的数据
	echo ‘你‘.$_POST[‘age‘].‘岁了‘;
 ?>

  

时间: 2024-10-12 00:10:17

ajax原生post请求的相关文章

使用原生ajax发送post请求完整案例

使用ajax发送数据实现前后台的交互,我想是web开发最基础的技能了.近来dz开发因为不兼容jquery,所以只能使用原生js发送数据,不想还遇到很多问题.在这里分析总结一下.先来一个使用ajax发送post表单数据的案例. <html> <head> <title> ajax发送post请求实例 </title> </head> <body> <form method="post" action="

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

\黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day23-资料源码\ajax_code\day23_3 本代码中有模拟 jquery里面的对Ajax的简化封装: json2.jsp  Ajax原生请求 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@

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

processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务端后会变成d[]=1&d[]=2的形式. 要将其设置为false后,才能上传ArrayBuffer对象,服务端直接从Request.InputStream获取原始字节流. w3school解释: processData 类型:Boolean 默认值: true.默认情况下,通过data选项传递进来的数

什么是Ajax与Ajax原生的实现方式

一.什么是Ajax? Aiax:异步的Javascript和XML. 作用:用于完成局部刷新 XML是用于数据传输,现在开始被JSON所替代. 1.1.交互方式问题 传统的交互方式每次都必须返回整个页面,宽带,响应速度都有影响的, Ajax的交互方式是从 客户端(浏览器)从服务器加载网页完毕后,网页中的内容如果需要更改,不使用浏览器发送请求,而是使用JavaScript中的XMLHttpRequest(及Ajax对象)对象发送请求到服务器,服务器接收请求并处理完毕后只返回页面需要的内容,XMLH

Ajax发送post请求

//创建Ajax对象(兼容处理) function createXHR() { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } return xhr; } //发送post请求 function request(){ xhr.open('P

Web:AJAX的网络请求

1.通过XMLHttpRequest方式发送请求 (1)前提创建XMLHttpRequest对象: //发送请求 var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); }else{ request = new ActiveXObject("Microsoft.XMLHTTP"); } (2)然后通过XMLHttpRequest对象调用open()和send()发送请求: //第一种ajax请求

JQuery的Ajax跨域请求的

JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的话,会创建一个查询字符串參数 callback=? .这个參数会加在请求的URL后面. server端应当在JSON数据前加上回调函数名.以便完毕一个有效的JSONP请求.意思就是远程服务端须要对返回的数据做下处理,依据client提交的callback的參数,返回一个callback(json)的

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

ajax从struts2请求数据的返回形式

这篇随笔算是接上篇的数据请求返回,上一篇关于分页用的返回的数据形式是json,http://www.cnblogs.com/tele-share/p/7192206.html这次主要探讨ajax从struts接收html和io流的数据形式. 方式一:接收html格式的数据 jsp页面 1 <!-- ajax从struts请求拼接完成的html --> 2 <script type="text/javascript"> 3 var url = "${pa