原生javascript和jquery实现简单的ajax例子
后台C#代码
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request["Name"]; var data = new T_UsersTableAdapter().GetDataByName(name);
JavaScriptSerializer jss = new JavaScriptSerializer(); if (data.Count <= )
{
var user = jss.Serialize(new Users() { Status = "error", Age = });
context.Response.Write(user);
}
else
{
var user = jss.Serialize(new Users() { Status = "ok", Age = data.Single().Age });
context.Response.Write(user);
}
} public class Users
{
public string Status { set; get; }
public int Age { set; get; }
}
html页面
<body>
<input id="user" type="text" />
<input id="btnSearch" onclick="search();" type="button" value="查询" />
<input id="btnSearch1" onclick="search1();" type="button" value="Jquery查询" />
<div id="userInfo"></div>
</body>
前台javascript和jquery分别实现ajax
<script type="text/javascript">
function search() {
var xmlhttp;
var name = document.getElementById("user").value; if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
} xmlhttp.open("post", "HandlerUsers.ashx?name=" + name, false);
var div = document.getElementById("userInfo");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var arr = xmlhttp.responseText;
arr = JSON.parse(arr);
if (arr.Status == "ok") {
div.innerHTML = arr.Age;
} else {
div.innerHTML = "查找的用户名不存在!";
}
} else {
div.innerHTML = "ajax错误!";
}
}
}
xmlhttp.send();
} function search1() {
$(function () {
var name = $("#user").val();
var div = $("#userInfo"); $.post("HandlerUsers.ashx", { "name": name }, function (data, status) {
if (status == "success") {
var user = $.parseJSON(data);
alert(user);
if (user.Status == "ok") {
div.html(user.Age);
} else {
div.html("查询的用户名不存在!");
}
} else {
div.html("ajax错误!");
}
});
});
}
</script>
原生javascript和jquery实现简单的ajax例子的更多相关文章
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- 原生 JavaScript 代替 jQuery【转】
目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- 原生javascript与jquery 的比较
JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- 常见的dom操作----原生JavaScript与jQuery
1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...
- 原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass
介绍: 1.hasClass:判断DOM元素是否存在类. 2.addClass:为的DOM元素添加类. 3.removeClass:删除DOM元素的类. 4.toggleClass:如果DOM元素存在 ...
- 原生JavaScript和jQuery的较量
JavaScript和jQuery有很多相似知促,那么二者又是如何进行较量,我们先了解一下什么是JavaScript和jQuery,知其源头,才能知其所以然. 简介: [JavaScript] 一种直 ...
- [Javascript,JSON] JQuery处理json与ajax返回JSON实例
转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...
随机推荐
- 一段处理百分数的js代码
function percent(s, e, i){ s = Number(s), isNaN(s) && (s = "0"); var n = "%&q ...
- selenium高亮显示操作步骤方法
package com.allin.pc;import java.util.List;import org.openqa.selenium.WebElement;import org.openqa.s ...
- Hadoop 2.4.x集群安装配置问题总结
配置文件:/etc/profile export JAVA_HOME=/usr/java/latest export HADOOP_PREFIX=/opt/hadoop-2.4.1 export HA ...
- C语言位操作(转)
http://www.cnblogs.com/cpoint/category/524132.html
- CentOS----使用yum命令出现“could not retrieve mirrorlist http://mirrorlist.centos.org ***” - ybq155”
无聊安装了个mini版的32位的CentOS 6.5,进来想安装个东西,yum install emacs 提示什么 Loaded plugins: fastestmirror, refresh-pa ...
- createjs 的 bitmapdata类
今天测试一个功能,在效率上出现了问题.2D舞台绘制了大量的元素,联想到AS3的 bitmapdata.darw() 功能,遗憾是createjs官方类 中没有bitmapdata类. 好在已经有大神替 ...
- 阿里云对象存储OSS————跨域资源共享(CORS)(m3u8 无法加载m3u8:跨域访问被拒绝)
今天在做视频直播录像的时候,添加一个录制APP的.M3U8文件到OSS的一个test文件中存储,结果是访问不到了: 提示:无法加载m3u8:跨域访问被拒绝!!!!! 项目代码测试地址:https:// ...
- Java开发高薪之路__大纲篇
本人小白,现对java开发做出以下总结,内容将从初级开始,逐步完善与摸索. 基础篇 网页篇 Android篇 高级建设篇 数据篇 系统篇
- Mvc导入导出Excel
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2&g ...
- 小韦XPSP3 V10.0_Ghost精简版
小韦XPSP3 V10.0_Ghost精简版 该版本基于小韦XPSP3 V10.0,用EasySysprep_4.1进行重新封装,最大程度保持原版极度精简的理念.C盘为NTFS格式,安装后C盘只占用2 ...