Ajax从某个页面读取数据

2024-05-11 01:48
文章标签 页面 ajax 读取数据

本文主要是介绍Ajax从某个页面读取数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在某个页面中存储下面的一些json数据:

{  
"programmers": [  
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },  
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },  
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }  
],  
"authors": [  
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },  
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },  
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }  
],  
"musicians": [  
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },  
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }  
]  
}  

利用原生Ajax发送请求获取上个页面中的数据,并写入本页面中:

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>
<html>  
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>People at Clearleft</title>
<script type="text/javascript">
var httpRequest;
//创建异步请求
function creatXMLHttpRequest(){if(window.XMLHttpRequest){httpRequest= new XMLHttpRequest();}else{if(window.ActiveXObject){try{httpRequest = new ActiveXObject("Msxm12.XMLHTTP");}catch(e){try {httpRequest= new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}}}
//ajax 回调函数
function callback(){if (httpRequest.readyState==4){if(httpRequest.status==200){/*主要操作*/var xmldata=httpRequest.responseText;	/*将数据转为json格式*/var json = eval("("+xmldata+")");
/*给页面中的文本框内容赋值*/
document.getElementById("i").value=json.programmers[0].firstName; //document.getElementById("str").innerHTML=json;//document.getElementById("str").innerHTML=xmldata;}}}
function  getdata(){creatXMLHttpRequest();httpRequest.onreadystatechange=callback;httpRequest.open("GET","json.txt" ,true);httpRequest.send(null);		
}</script>
</head><body>
<div id="str" style="display:none"></div>
<input id="i" type="text" value="">
<input type="button" value="find data" οnclick="getdata()"/>
</body></html>


这篇关于Ajax从某个页面读取数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/978166

相关文章

使用JavaScript将PDF页面中的标注扁平化的操作指南

《使用JavaScript将PDF页面中的标注扁平化的操作指南》扁平化(flatten)操作可以将标注作为矢量图形包含在PDF页面的内容中,使其不可编辑,DynamsoftDocumentViewer... 目录使用Dynamsoft Document Viewer打开一个PDF文件并启用标注添加功能扁平化

SpringBoot如何访问jsp页面

《SpringBoot如何访问jsp页面》本文介绍了如何在SpringBoot项目中进行Web开发,包括创建项目、配置文件、添加依赖、控制层修改、测试效果以及在IDEA中进行配置的详细步骤... 目录SpringBoot如何访问JSP页python面简介实现步骤1. 首先创建的项目一定要是web项目2. 在

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法(字母开头,允许4-16字节,允许字母数字下划线)';return fal

javascript实现ajax

什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取。 http 请求 首先需要了解 http 请求的方法(GET 和 POST)。 GET 用于获取数据。GET 是在 URL 中传递数据,它的安全性低,容量低。 POST 用于上传数据。POST 安全性一般,容量几乎无限。 aj

Weex入门教程之3,使用 Vue 开发 Weex 页面

环境安装 在这里简略地介绍下,详细看官方教程 Node.js 环境 Node.js官网 通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit。 npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区,同样,Weex 也将很多工具发布到社区方便开发者使用。

jQuery—Ajax使用

AJAX是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新[百度百科]   ** XMLHttpRequest对象 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 常用属性: read

ViewPager+fragment实现切换页面(一)

如今的很多应用中都是下面有一排按钮,点击可以切换页面,滑动也可以切换页面。下面就来简单的实现这个功能。 思路 首先肯定是会用到viewpager这个控件,为了能够向下兼容,最好用v4包下的viewpager,Activity要继承FragmentActivity 其次用一个集合来存储所有的fragment页面在设置viewpager的适配器时,把存储fragment页面的list集合传入ada