ajax基本案例

前端之家收集整理的这篇文章主要介绍了ajax基本案例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<!DOCTYPE html>

<html lang="en">

<head>

<Meta charset="utf-8">

<script type="text/javascript">

function $(id){

return document.getElementById(id);

}

var xmlhttp="";

function get_xmlhttp(){

xmlhttp=new XMLHttpRequest();

var url='/ajax/test.PHP';

var data='username='+$('name').value;

xmlhttp.open('post',url,true);//打开请求

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

xmlhttp.onreadystatechange=callback;//指定回调函数

xmlhttp.send(data);//发送数据,若get填null;若post,则填实际数据

}

function callback(){

if (xmlhttp.readyState==4 && xmlhttp.status==200){

var obj=xmlhttp.responseText;

obj=eval("("+obj+")");

document.getElementById('msg').value=obj.res;

}

}

</script>

</head>

<body>


<div id="container">

<div id="body">

<form action="#" method="post">

username:<input type="text" id="name" onKeyUp="get_xmlhttp();"/>

password:<input type="password" id="pwd"/>

<input type="submit" value="确定" onClick="get_xmlhttp();"/>

<input type="text" id="msg"/>

</form>

</div>


</body>

</html>

原文链接:https://www.f2er.com/ajax/162351.html

猜你在找的Ajax相关文章