ajax小demo-----ajax中json的使用

使用简单例子,表单的的输入,将表单输入以JSON的形式传入,并后台返回JSON格式,使用js函数处理,进行显示,进一步熟悉了ajax的用法,以及JSON的的使用。例子如下:

html部分:
<form action="test1.php" method="get" onsubmit="return check();"> 
	<label for="username">用户名&nbsp;</label><input type="text" placeholder="请输入用户名" id="username"><br>
	<label for="usernum">&nbsp;学号&nbsp;</label><input type="text" placeholder="请输入学号" id="usernum" onblur="checkform();"><br>
    <input type="submit" value="提交">
   <div id="tips"></div>
 </form>
 js部分:
 <script>
		var xmlobj;
		var result=false;
		function createXMLHttpRequest(){
			if(window.ActiveXObject){
                xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
			}
			else if(window.XMLHttpRequest){
				xmlobj=new XMLHttpRequest();
			}
		}
		function check(){
			if(resultform()){
				return true;
			}
			else{
				return false;
			}
		}
    function checkform(){
            var usernameobj=document.getElementById(‘username‘).value;
			var usernumobj=document.getElementById(‘usernum‘).value;
			var data={username:usernameobj,usernum:usernumobj};
			var jsonobj=JSON.stringify(data);//将对象转换为JSON串,通过ajax进行传递
            var cb = ajaxResultdeal; 
			url=‘test.php?data=‘+jsonobj+"&r="+Math.random();
             toAjax(url,cb);
      }

    function toAjax(url,callback){
            createXMLHttpRequest();		    
			xmlobj.onreadystatechange=function(){
				if(xmlobj.readyState==4&&xmlobj.status==200){
					 callback(xmlobj.responseText);
                   
				}
				else{
					result=false;
				}
			}		 
			xmlobj.open("GET",url,true);
			/*xmlobj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
			xmlobj.send(data);*/
			xmlobj.send(null);
		}
		function ajaxResultdeal(response){
            
			  var tips=document.getElementById(‘tips‘);
			  var json=JSON.parse(response);
			    if(json[‘username‘]=="11"){
			      tips.innerHTML="<h1>你输入的名字是:"+json[‘username‘]+"</h1>";
				  result=true;
			    }
			    else{
			    	tips.innerHTML="<h1>你输入的有误</h1>";
			    	result=false;
			    }

              resultform();
               
			}

  function resultform(){
	if(result){
		return true;
	}
	else{

		return false;
	}
}
	</script>
php部分:
<?php
 header("Content-Type:application/json;charset=utf-8");

  $data = json_decode($_GET[‘data‘],true);

  echo  $_GET[‘data‘];
  ?>

效果图:

当用户名为11时,输入正确,如图:

当用户名不是11时,输出为:

时间: 2024-10-11 23:08:37

ajax小demo-----ajax中json的使用的相关文章

jQuery 中 ajax 请求数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ... ajax01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ajax小例子 </title> </head> <body> <!--

jQuery 中 ajax 提交数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名问题 ... ajax02.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="form&qu

如何在AJAX的毁掉函数中传递JSON数据?如何在控制器中接受并转换成数组?

首先,我们经过测试(或者你平时的开发经验)知道,在AJAX的回调函数中使用get或者post方式可以传递字符串(不信可以自己去写实例测试,不过要注意:get方式有数据量的限制): 方法一:我们将ajax的请求放回的JSON数组转换成字符串,然后在回调函数中get过去: a.html页面的AJAX请求代码: b.后台两个处理函数(尤其注意第二个是回调函数指向的处理函数): 方法二:我们在回调函数中直接处理发送一个新的AJAX请求(也可以写成匿名函数),将ajax请回来的JSON数组转化为字符串作为

关于ajax读取数据表中存放复合json的问题

自己模拟了一点json数据存放在了数据库一个表中大家可以自己模拟 {"1":{"id":"1","name":"asd","type":"1","value":"1L,4L"}} {"2":{"id":"2","name":"kjf&quo

基于Ajax技术的前后端Json数据交互方式实现

前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起DNS请求,DNS服务器解析域名后返回域名对应的网站服务器IP地址第二步:浏览器获取IP地址后向网络服务器发送一个HTTP请求第三步:网络服务器解析浏览器的请求后从数据库获取资源,将生成的html文件封装至HTTP 响应包中,返回至浏览器解析 下图抓包显示了访问"www.baidu.com"

瀑布流原生ajax,demo

最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.jpg:2.jpg;3.jpg.... ajax.php页面 <?php //模拟从数据库读取数据    $arr = array();    $op = opendir('./img');    //打开目录 //循环读取目录    while (($file = readdir($op)) !==

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildSelectBox(url, par, sel) {  $(sel).empty();  $.getJSON(url, { id: par }, function (json, textStatus) {   for (var i = json.length - 1; i >= 0; i--) {  

Ajax 传包含集合的JSON

通过ajax给后台传json对象,当json中含对象集合时,如 $.ajax({ url : , type : "POST", dataType : "json", data: { 'year; : ;2006', 'list' : [ {'day': '01', 'type' : 'A'}, {'day': '02', 'type' : 'A'}, ] }, }): 此种方式在服务器端接收不到data 解决办法,把list中json转成字符串,服务器端再解析成js

封装ajax小工具:

1 ajax-lib/ajaxutils.js: 2 3 // 创建request对象 4 function createXMLHttpRequest() { 5 try { 6 return new XMLHttpRequest();//大多数浏览器 7 } catch (e) { 8 try { 9 return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 10 } catch (e) { 11 try { 12 return ActvieXOb