ajax+php+js实现异步刷新表单验证
创建ajax对象
//创建对象
function createAjax(){
var request =false;
//IE浏览器,window对象存在ActiveXObject属性
if(window.ActiveXObject){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request = false;
}
}
} //非IE浏览器,window对象存在XMLHttpRequest属性
if(window.XMLHttpRequest){
request = new XMLHttpRequest(); if (request.overrideMimeType) {
request.overrideMimeType("text/xml");
}
}
return request;
}
页面js语句触发事件
<input type="text" id="search_input" placeholder="智能搜索" onkeydown="search('total_marks')" onkeyup="result('total_marks')" style="border-color:#32CD32;border-radius:5px;">
调用的js方法
var content = document.getElementById("total_marks").innerHTML; function search(id){ var search = document.getElementById(id);
search.innerHTML = "<div style='margin-left:200px;'>正在搜索...请稍候...</div>";
} //获取数据
function search_result(){
var ajax = null;
// alert(ajax);每次请求都要求使用一个新的XMLHttpRequest var div_ajax = document.getElementById("search_input");
var val = div_ajax.value; ajax = createAjax();
ajax.onreadystatechange=function(){
// alert(ajax.readyState);//可知当状态值为4时,才能取值
if(ajax.readyState == 4){
// alert(ajax.status);
if(ajax.status == 200){
var data = ajax.responseText;//数据都返回在responsetext中
document.getElementById('total_marks').innerHTML = data;
}else{
alert('页面请求失败!');
}
}
}
url = "../bookmarks/js/search.php?key="+val;
//如果使用get,就直接通过url直接将数据传给服务器
ajax.open("get",url,true);
ajax.send(null); } function result(id){ if (document.getElementById("search_input").value == "") {
document.getElementById(id).innerHTML = window.content;
}else{
setTimeout(search_result,1000)
};
}
请求的php代码
<?php
//最好设定字符集,不然在ajax中默认的字符集会导致出错
require_once("../db.php");
header("Content-Type:text/html;charset=utf-8"); $sql = "SELECT icon,content from bookmarks where title LIKE '%".$_GET['key']."%' order by clicknum";
$result = mysql_query($sql); //将多个值存放进数组才能输出,不然会当作一个字符串输出
// $arr = array("one"=>"111111","two"=>"222222","three"=>"33333333");
// echo json_encode($arr);
?>
ajax+php+js实现异步刷新表单验证的更多相关文章
- js/jquery/插件表单验证
媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- 表单验证—js循环所有表单验证
[封装为表单验证的专用js,所有表单页面都可以调用] 1.表单 <form id="regForm" method="post" action=" ...
- js函数、表单验证
惊天bug!!!在script里面只要有一点点错误,就都不执行了!!!所以每写一个方法,就跑一下,因为这个书写疏忽导致的bug不可估量!!! [笑哭,所以我才这么讨厌js么,后来真心的是一点都不想再看 ...
- js 常用正则表达式表单验证代码
正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一 ...
- js常用正则表达式表单验证代码
方法一: var re=/正则表达式/; re.test($("txtid").val()) 方法二: $("txtid").val.match(/正则 ...
- JS常见的表单验证,H5自带的验证和正则表达式的验证
H5验证 自带的验证无法满足需求: <form action="" method="get"> name:<input type=" ...
- 模拟js中注册表单验证
示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- JS中的表单验证+正则表达式
表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...
随机推荐
- Myeclipse中web project各种常见错误及解决方法(持续更新)
创建web project时的问题 error:Install Dynamic web Module Facet卡住 solution:把网络关掉再创建就可以 Servlet error:The se ...
- aspnet_isapi.dll设置图文介绍.net的程序实现伪静态
用URLRewriter控件 ①:首先要有这个文件URLRewriter.dll,如果没有,赶快到网上下载一个,并将其放到下面的bin目录里面,并且将其引用添加到下面里面; ②:下面就是Web.Con ...
- Struts2
为什么要用Struts2? 这里列举一些Servlet的缺点: 1.每写一个servlet在web.xml中都要做相应的配置.如果有多很servlet,会导致web.xml内容过于繁多. 2.这样的结 ...
- linux查看发行版本
redhat系 cat /etc/redhat-release 其他 lsb_release -a
- ASP.NET Core 数据保护(Data Protection 集群场景)【下】
前言 接[中篇],在有一些场景下,我们需要对 ASP.NET Core 的加密方法进行扩展,来适应我们的需求,这个时候就需要使用到了一些 Core 提供的高级的功能. 本文还列举了在集群场景下,有时候 ...
- 我的面板我做主 -- 淘宝UWP中自定义Panel的实现
在Windows10 UWP开发平台上内置的XMAL布局面板包括RelativePanel.StackPanel.Grid.VariableSizedWrapGrid 和 Canvas.在开发淘宝UW ...
- 剑指Offer面试题:30.第一个只出现一次的字符
一.题目:第一个只出现一次的字符 题目:在字符串中找出第一个只出现一次的字符.如输入"abaccdeff",则输出'b'.要求时间复杂度为O(n). 最直观的想法是从头开始扫描这个 ...
- 浅析用Base64编码的图片优化网页加载速度
想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片.如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度.所以现在有一种 ...
- Mycat 月分片方法
概述 本篇文章主要介绍Mycat以月进行分片的方法,包括配置方法.注意事项等. mycat版本:1.4 数据节点:dn1,dn2,dn3 架构:主从 配置 创建测试表 CREATE TABLE `t ...
- struts tags
HTTP ERROR 500 Problem accessing /showognl.jsp. Reason: Server Error Caused by: org.apache.jasper.Ja ...