扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Ajax如何添加数据即时显示信息
  • 266

0
分享到

Ajax如何添加数据即时显示信息

2024-04-02 19:04:59 266人浏览 薄情痞子
摘要

这篇文章主要介绍了ajax如何添加数据即时显示信息，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。下面我们先来看下前端的代码 <

这篇文章主要介绍了ajax如何添加数据即时显示信息，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

下面我们先来看下前端的代码 

<html>
<head>
<title>ajax无刷新添加数据</title>
</head>
<body>
输入内容：<input id="str" type="input" /> <input type="button" value="确定添加" onclick="add_Post()"/>
<span id="msg" ></span>
<script type="text/javascript">
function ajax_xmlHttp(){
//在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循环创建基于IE浏览器的xmlhttp.结束
//如果非IE浏览器，则创建基于FireFox等浏览器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}

//读取数据函数
function Post(){
var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量．
ajax.open("post","add_data.asp?action=read",true);//设置请求方式，请求文件，异步请求
ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称
if(ajax.readyState==4){//数据返回成功
if(ajax.status==200){//http请求状态码返回ok
var xmlData = ajax.responseXML;
var list = xmlData.getElementsByTagName("list");//获取所有的list标签
if(list.length!=0){
var t = document.createElement("table");
t.setAttribute("border","1");
t.setAttribute("id","abc"); //为表格设置一个id属性，值为abc
var thead = t.createTHead();
var _tr = thead.insertRow(0) //为thead创建一行
var _td = _tr.insertCell(0);
_td.innerHTML = "内容";
document.body.appendChild(t);
for(var i=0;i<list[0].childnodes.length;i++){ //遍历所有的list,有几个list的便为表格添加几行．
var tr = t.insertRow(0);
var td = tr.insertCell(0);
td.innerHTML = list[0].childNodes[i].firstChild.nodeValue;
}
}
}
}
}
ajax.send(null);
}

//提交数据函数
function add_Post(){
var msgaes = document.getElementById("msg");//用来显示提示信息
var str = document.getElementById("str");//接收输入的内容
if(str.value.length == 0){
msgaes.innerHTML = "不接受空内容！"
return;
}
msgaes.innerHTML = "正在提交";
var ajax = ajax_xmlhttp();//定义xmlhttprequest对象
ajax.open("post","add_data.asp?action=add",true);//设置请求方式，请求文件，异步请求

var param = "str="+escape(str.value);//获取你输入的内容,注意这里的str,服务端将接收str中的值
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var msg = ajax.responseXML.getElementsByTagName("msg");//获取服务端返回的msg标签
if(msg[0].firstChild.nodeValue == 0){
var t = document.getElementById("abc");
var tr = t.insertRow(0);
var td = tr.insertCell();
td.innerHTML = str.value;
str.value = "";
msgaes.innerHTML = "添加完成";
}
else if(msg[0].firstChild.nodeValue == 3){
msgaes.innerHTML = "不接受空的内容";
return;
}
else if(msg[0].firstChild.nodeValue == 1){
msgaes.innerHTML = "服务端发生了错误，数据添加失败!";
return;
}
else{
msgaes.innerHTML = "该实例供学习使用．请不要恶意输入．谢谢！";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-fORM-urlencoded");//注意向服务端提交数据，必须设置该头．否则服务端会接收不到
ajax.send(param);//注意send方法向服务端提交param变量中的内容．
}
window.load = Post();//只有在打开网页或刷新网页以后才会执行读取数据函数
</script>
</body>
</html>




点击上面的查看实例效果，就是我们今天要学习的目的．上面的代码只是前端的html代码．在代码里有3个自定义函数．


1、ajax_xmlhttp();该函数我们在前面的教程已经讲过，是用来创建一个可用性的XMLHTTPRequest对象，如果你还不了解，请参阅：ajax开始准备篇

2、Post();该函数还是用来读取数据．我们在本章教程中不再解释ajax是如何读取数据的．你可以参阅：ajax初试读取数据篇与ajax读取数据到表格 不过跟前２篇不同的是．该Post函数不是在点击 按扭时被触发．而是在你第一次打开网页或刷新页面的时候才会执行该函数．其目的是用来读取数据库中已存在的数据．在数据添加成功以后．并没有运行该函数．其中的秘密下面的解释中我会告诉你！另外你再看一下open方法中的设置．我们在请求的网址后面多了一个action=read,这个大家应该用过．在url后面的参数， 服务端可以接收该参数．在Asp中使用Request.QueryString来接收．PHP中使用$get方法来接收．我们设置这个url的参数目的是想要告诉服务器．我们要执行什么动作．在Add_Data.Asp网页中有两个自定义过程，一个用来读取数据，一个用来添加数据．这个action=read参数服务端接收以后．经过判断会执行读取数据的过程！

3、我们重点来讲一下这个add_Post函数．函数刚开始便使用getElementById方法在网页查找msg与str．msg是用来显示一些当前的操作信息．str是用来获取你输入的内容．然后判断你是否在str的文本框中输入了内容．如果为空则退出函数．
再看open方法的设置．请求的网页url后面的参数是action=add，服务端网页接收action这个参数．经过判断如果值是add，则执行插入数据的过程．

var param = "str="+escape(str.value);将str文本框的内容等于一个str，然后一并赋值给param变量．待会发送请求时．send会提交这个param变量中的内容．escape的意思是对 String 对象编码以便它们能在所有计算机上可读，就是解码你输入的内容．经过测试有时候可以忽略，但有时候会出现乱码．为保险起见我们还是使用escape

我们先不讲readystatechange指定的程序．看下面：
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");这行的意思是．我要向服务端提交表单内容．当你的请求方式是post，并且有数据向服务端提交时．必须设置setRequestHeader．如果你使用的请求方式是get或者没有数据要提交则可以忽略该句．

ajax.send(param);发送请求．并在send的参数里指定要提交param变量中的内容．你可以alert一下param，会弹出str="你输入的内容"，然后我们在服务端的网页接收这个str，便可以获取str中的内容了．也就是你在文本框中输入的． 讲到这里应该是时候看一下这个被请求的服务端网页了．看看他到底在服务端干了些什么．请看：

复制代码 代码如下:


<!--#include file="Conn.Asp"-->
<%
'出自：http://Www.WEB666.net
'作者：康董
'如需转载请务必保留以上信息
'定义一个变量，来保存xml数据
xml="<?xml version='1.0' encoding='gb2312'?><body>"
action=Request.QueryString("action") '使用get方式接受一个action来判断客户端想要执行什么操作
Select case action
case "read" '如果为read则执行读取数据的操作
Call Read
case "add" '如果为add则执行添加数据的操作
Call Add_Data
case else
xml = xml&"<msg>请求参数错误，请不要试图非法操作！</msg>"
End Select

xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml '注意这句啊．上面的那些判断执行过程．其目的就是获取一个新的xml变量内容．然后在这里输出这个xml
Response.End

Sub Read '定义一个读取数据的过程
Call OpenConn '打开数据库链接
sql = "Select * From web_table" '打开数据库中名字为web_table的表
Set Rs = Conn.Execute(Sql) '执行Sql语句，并将sql的索引赋值给rs变量
xml = xml&"<list>" '没开始读取之前先建立一个list标签．将所有数据都包含在该标签下
While Not Rs.Eof '如果表中有数据．则一直循环读取
xml = xml&"<li>"&Rs("web")&"</li>"
Rs.MoveNext '执行下一条数据的读取
Wend '如果数据库中没有了数据．则结束循环
xml = xml&"</list>" '数据读完闭合list标签
Close_Conn '关闭数据库链接
End Sub

Sub Add_Data '添加数据过程
On Error Resume Next '如果发生错误继续执行程序
OpenConn '打开数据库链接
str = Trim(Request.Form("str")) '接收客户端传过来的str内容
If str = "" Then
xml = xml&"<msg>3</msg>" '如果提交的内容为空．返回3
Exit Sub '退出过程
End If
Sql = "Insert Into web_table (web) values ('"&str&"')"
Conn.Execute(Sql) '执行添加数据
If Err.Number = 0 Then '判断是否有错误发生，
xml = xml&"<msg>0</msg>" '如果没有错误发生，则证明数据已经成功．返回0
Exit Sub
Else
xml = xml&"<msg>1</msg>" '如果发生错误．则证明有错误发生．数据很可能添加失败
Exit Sub
End If
End Sub
%>


上面是你使用ajax请求的服务端网页：Add_Data.Asp的源码．现在使用Asp的应该不多了吧？但我依然痴情于她．无论你用的服务端技术是php，.Net，或者jsp等．经过我的解释你应该很容易的会模拟出这个源码的功能．
1：include file="Conn.asp"在Asp里的作用是引入一个网页．Conn.asp是我的数据库链接文件．为安全起见．我就不暴露数据库名称了．你自己建个库．随便起个名进行测试吧．
2：定义一个名字为xml变量．将xml格式的数据保存在这个变量中．使用Response.Write输出xml变量中的内容．
3：接收你在前端url传过来的action参数．并判断action的值．Select case不用解释了吧．多支判断．如果action的值是read,则执行Read过程．如果是add则执行Add_Data过程．如果两者都不是则证明不是通过正常渠道进行请求的． 向xml变量中再增加一个msg标签．输出以后会给出显示的内容
4：Response.Clear清除缓存．
5：Response.ContentType="text/xml"定义输出的文本格式．xml类型
6：Response.CharSet="gb2312"输出编码，中文编码．
7：Response.write xml向客户端输出xml变量中的数据．该变量保存的是xml格式的数据．
8：Response.End停止一切输出．
9：定义一个 Read　过程．用来读取数据库test_table表中的web字段内的数据．打开数据库，sql语句．执行sql．开始读取！这些知识我就不讲了．如果你还不会．我想你应该去学习一下操作数据库的知识！我重点讲一下该Read过程的 意义．在读取数据之前先为xml变量中增加了一个list的标签．然后将所有的数据都读取到list标签内，每条数据又被包含在了一个li标签内．数取读取完毕．闭合list标签．我想说的是，这个Read过程并没有向客户端输出任何内容． 他的工作就是将数据库中的内容以xml的格式读取到那个xml变量中．当客户端action=add的时候．执行Read过程．Read过程给出一个新的xml变量．Response.Write xml输出这个变量到客户端，客户端接受到这个xml，我们在前端使用responseXML接收这个xml．然后显示！明白吗？不明白加我Q：30458885
10：我们再来讲Add_Data这个过程．Add_Data的意义和Read是相同的．都是在执行一系列操作以后向xml变量中赋值．Add_Data的作用是接受客户端发送过来的数据．并将数据写到数据库内．你仔细看下Add_Data中的程序逻辑．首先他会判断你提交的数据是否为空．如果为空向xml变量中增加一个msg标签．内容是3．然后退出Add_Data． 如果数据不为空．则向数据库写入该数据．然后判断是否有错误发生．如果没有错误也向xml变量中增加一个msg标签，内容是0．代表在写入数据时一切正常．数据被成功添加．相反Err.Number不等于0．则代表在写入数据时发生了错误．数据没有被成功添加．这时也会向xml变量中添加一个msg标签．内容为1．这三种情况无论那种发生 都会在添加msg标签以后立即退出Add_Data．所以只有一个msg标签会被写入．那么我们马上回来客户端Add_Post中函数正是接收了这个msg标签以后．根据msg的内容来判断服务端究竟发生了什么事！如果msg的内容为0，证明服务端一切正常，没有错误发生．数据已被添加到数据库．我们直接使用Dom将str中的内容写入到了表格内．并没有 执行读取数据的Post函数．如果msg内容为3，证明你输入了空的内容．如果msg内容为1，证明服务端有错误发生．数据写入失败！

感谢你能够认真阅读完这篇文章，希望小编分享的“Ajax如何添加数据即时显示信息”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网JavaScript频道，更多相关知识等着你来学习!

--结束END--

本文标题: Ajax如何添加数据即时显示信息

本文链接: https://lsjlt.com/news/83121.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Ajax如何添加数据即时显示信息
    这篇文章主要介绍了Ajax如何添加数据即时显示信息，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。下面我们先来看下前端的代码 <...
    99+
    2024-04-02
  • vue如何添加数组页面及时显示
    目录如何添加数组页面及时显示给对象中添加数组如何添加数组页面及时显示 最近在做vue相关的项目，在过程中，遇到了很多问题，有的解决了，有的还没解决，其中一个比较好的问题是，一个评论回...
    99+
    2024-04-02
  • 如何在编写SHELL时显示多行信息
    这篇文章主要介绍了如何在编写SHELL时显示多行信息，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。在编写SHELL 时显示多行信息代码如下:...
    99+
    2024-04-02
  • ajax如何获取json数据并显示
    使用Ajax可以通过发送HTTP请求获取JSON数据，然后将数据显示在网页上。以下是一个使用Ajax获取JSON数据并显示的示例：`...
    99+
    2023-09-13
    ajax json
  • Select2如何使用ajax获取远程数据时显示默认数据
    这篇文章给大家分享的是有关Select2如何使用ajax获取远程数据时显示默认数据的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。假设我需要在我的select2中默认添加一个之前从服务器上获取过的数据，通过以下方法...
    99+
    2023-06-08
  • Ajax如何读取数据并分页显示
    这篇文章将为大家详细讲解有关Ajax如何读取数据并分页显示，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 我觉得还是有必要把我的ajax分页...
    99+
    2024-04-02
  • ajax如何接收后端数据并显示
    要使用Ajax接收后端数据并显示，可以按照以下步骤进行操作：1. 创建一个XMLHttpRequest对象。可以使用`new XML...
    99+
    2023-08-09
    ajax
  • vue怎么添加数组页面及时显示
    今天小编给大家分享一下vue怎么添加数组页面及时显示的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。如何添加数组页面及时显示最...
    99+
    2023-06-30
  • linux如何显示CPU info的信息
    ...
    99+
    2024-04-02
  • php表格怎么显示数据库信息
    要在PHP中显示数据库信息，您可以使用以下步骤： 连接到数据库：使用PHP的`mysqli`或`PDO`扩展连接到数据库。例如：...
    99+
    2023-10-27
    php 数据库
  • 如何利用Maven添加工程版本信息及时间戳
    这篇文章将为大家详细讲解有关如何利用Maven添加工程版本信息及时间戳，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Maven添加工程版本信息及时间戳定义全局变量pom文件中添加<propertie...
    99+
    2023-06-22
  • Go项目中如何添加生成时间与版本信息
    这篇文章主要介绍了Go项目中如何添加生成时间与版本信息的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Go项目中如何添加生成时间与版本信息文章都会有所收获，下面我们一起来看看吧。一、获取生成时间1.使用Go编译时...
    99+
    2023-07-05
  • 怎么在mysql数据库中添加备注信息
    这期内容当中小编将会给大家带来有关怎么在mysql数据库中添加备注信息，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。创建表的时候，添加表名备注和字段备注CREATE TABLE `he...
    99+
    2023-06-06
  • 如何使用VB.NET显示系统信息
    这篇文章将为大家详细讲解有关如何使用VB.NET显示系统信息，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1.新建项目打开Visual Studio.NET，选择“新建项目”，在项目类型窗口中选择“Vis...
    99+
    2023-06-17
  • linux如何显示压缩文件信息
    这篇“linux如何显示压缩文件信息”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“linu...
    99+
    2023-02-13
    linux
  • 如何在 PHP 中显示错误信息
    在本文中，我们将介绍一种在 PHP 中显示错误信息的方法。 使用 ini_set() 和 error_reporting() 函数 在 PHP 中使用 ini_set() 和 erro...
    99+
    2024-02-27
  • 如何为jquery的ajax请求添加超时timeout时间
    这篇文章主要介绍如何为jquery的ajax请求添加超时timeout时间，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！下面给大家介绍为jquery的ajax请求添加超时timeou...
    99+
    2024-04-02
  • Ajax如何实现下拉框联动显示数据
    小编给大家分享一下Ajax如何实现下拉框联动显示数据，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！页面中的两个下拉列表框：<...
    99+
    2024-04-02
  • Vue实现添加数据到二维数组并显示
    目录添加数据到二维数组并显示读取二维数组添加数据到二维数组并显示 <li v-for="(item, index) in studentlist" :key="index"&g...
    99+
    2024-04-02
  • 如何在 iOS 应用中添加位置信息
    目录获取设备位置信息在锁屏情况下继续更新 GPS 信息为应用添加后台位置权限最近要在 iOS 应用中添加位置信息， 需要满足的需求如下： 应用在前台时能够获取位置信息； 通...
    99+
    2022-06-04
    ios 应用 位置信息
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作