ajax.完整案例

php写法

<?php

$id = $_GET[‘id‘];

if($id==1){

$arr[‘name‘] = "三只松鼠";

$arr[‘money‘] = 100;

$arr[‘guige‘] = "3袋装";

$arr["love"] = 1;

$arr["srcc"]="img7_03.png";

echo json_encode($arr);

}else {

$arr = "请输入id";

}

?>

<!DOCTYPEhtml>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div class="" id="box">

<img src="" alt="" />

<p class="p1">姓名</p>

<p class="p2">钱</p>

<p class="p3">规格</p>

<p class="p4">爱</p>

<button>点击按钮</button>

<a href=""></a>

</div>

</body>

<script type="text/javascript">

var p1=document.querySelector(".p1");

var p2=document.querySelector(".p2");

var p3=document.querySelector(".p3");

var p4=document.querySelector(".p4");

var btn=document.querySelector("button");

var imgs=document.querySelector("img");

var ap=document.querySelector("a");

//做兼容处理。创建新的对象   http://www.jb51.net/article/23175.htm

if(window.XMLHttpRequest){

//创建新的对象

var ajax = new XMLHttpRequest();

}else{

var ajax = new ActiveXObject();

}

btn.onclick=function(){

//打开,用什么方式获取, 文件有id写id,同步还是异步

ajax.open("GET","new_file.php?id=1",true);

ajax.send(); /*发送数据*/

/*ajax,当事件改变时当请求被发送到服务器时,我们需要执行一些基于响应的任务。*/

,    http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp

ajax.onreadystatechange = function(){

/*判断是否获取成功*/  http://blog.csdn.net/u013381651/article/details/51261956

if(ajax.readyState==4){

每当 readyState 改变时,就会触发 onreadystatechange 事件。

if(ajax.status==200){

//获取它的对象进行转换成整数*/

var obj=JSON.parse(ajax.responseText);

p1.innerHTML="姓名"+obj.name;

p2.innerHTML="钱"+obj.money;

p3.innerHTML="规格"+obj.guige;

p4.innerHTML="爱"+obj.love;

/*点的形式进行获取打印对象*/

imgs.src=obj.srcc;

/*a.href=obj.html;*/

/*点的形式进行获取打印对象*/

}

}

}

}

</script>

</html>

原文地址:https://www.cnblogs.com/fengyuzhen34/p/9348370.html

时间: 2024-07-31 19:59:50

ajax.完整案例的相关文章

jQuery Address全站 AJAX 完整案例详解

本文详细介绍如何利用 jQuery 框架以及 jQuery Address 插件实现最基本的全站 AJAX 动态加载页面内容的功能的方法. 案例目标 以常见基本结构的网站为案例,实现全站链接 AJAX 加载页面内容,不刷新页面,不影响seo/seo.html" target="_blank">搜索引擎收录.同时兼容 WordPress. 功能实现 需要提供给 jQuery Address 的有三个常量,分别是: 代码如下 复制代码 var baseurl = 'http

ajax完整结构

ajax完整结构: $.ajax({            url: "", //服务器路径            data: { }, //传递的参数,可为空,可多个            type: "post", //传递参数的方式,可POST可GET,一般用POST            dataType: "json", //数据传递的格式,有Json和xml两种            success: function (data)

Ajax 完整教程 (转)

Ajax 完整教程 第 1 页 Ajax 简介 Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实.他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象. 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭.十八个月前,Rub

jQuery中的ajax用法案例

什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示. 使用 AJAX 的应用程序案例:谷歌地图.腾讯微博.优酷视频.人人网等等. 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法. 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本

Ajax完整结构和删除

1.ajax完整结构 注意:(1)最后一个没有"," (2)ajax对网速要求高,最好有各种提示和使用按钮(可使其失效,防止重复加载) $.ajax({ url: "ajax/tian.ashx",//连接的服务端 data: { "ncode": dd },//提交的数据 type: "post",//提交的方式 dataType: "json",//返回的数据类型 success: function (

dos/bat批处理教程——第四部分:完整案例

dos/bat批处理教程--第四部分:完整案例 以上就是批处理的一些用法.现在我们把这些用法结合起来详细的分析一下目前网上发布的一些批处理,看看他们是怎么运作的.这里我将列举三个例子来详细分析,为了保持程序的完整我的注释会加在/*后面. 例一 这个例子是利用iis5hack.exe对有.printer漏洞的主机进行溢出的批处理.用到的程序有iis5hack.exe和系统自带的telnet.exe.iis5hack的命令格式为: iis5hack <目标ip> <目标端口> <

strut2 文件上传完整案例

之前写的文章都是关键的代码,今天整理好一个完整案例,粘贴可运行. 上传界面:upload.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+r

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

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

CORS ajax跨域请求php简单完整案例一则

一.CORS: Cross-Origin Resource Sharing CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分享,不仅可以跨子域,就算域名长得完全不一样,也可以进行资源获取. 比较常见的应用之一就是Ajax跨域请求数据. 这个特性IE11开始支持: 和股市一样,大好河山一片绿,青青草原漫无边. 二.ajax跨域请求的header设置和案例 和传统ajax请求相比,ajax跨域请求的偶尔工作量主要在数据接收方那一端,也就是在服务器端设置.