AJAX一步到胃
Posted 零点起飞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX一步到胃相关的知识，希望对你有一定的参考价值。
最近有小粉想了解一下AJAX
今天简单说一下AJAX 80% 的用法
本次AJAX开发主要用用到 jQuery 与 简单基础的php
如果要了解AJAX原生的需要自己查一下
这里就不多说了
新建index.php
$firstName = $_POST[firstName];$lastName = $_POST[lastName];echo("First Name: " . $firstName . " Last Name: " . $lastName);
新建index.html
<html><head><title>Submit a form via AJAX</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />/* 连接jQuery */<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script><script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script></head><body><script>提交成功后，清空返回数据$.trim() 等于清空空格function onSuccess(data, status){data = $.trim(data);$("#notification").text(data);}提交失败时function onError(data, status){// handle an error}jQuery绑定提交数据$(document).ready(function() {$("#submit").click(function(){serialize();输出序列化表等于 firstName=数据1&lastName=数据2var formData = $("#callAjaxForm").serialize();$.ajax({type: "POST",url: "index.php", //提交到index.php页面cache: false,data: formData,success: onSuccess,error: onError});return false;});});</script>定义HTML页面<!-- call ajax page --><div data-role="page" id="callAjaxPage"><div data-role="header"><h1>Call Ajax</h1></div><div data-role="content"><form id="callAjaxForm"><div data-role="fieldcontain"><label for="firstName">First Name</label><input type="text" name="firstName" id="firstName" value="" /><label for="lastName">Last Name</label><input type="text" name="lastName" id="lastName" value="" /><h3 id="notification"></h3><button data-theme="b" id="submit" type="submit">Submit</button></div></form></div><div data-role="footer"><h1>GiantFlyingSaucer</h1></div></div></body></html>
今天的AJAX就说到这里，下次我们再讲点AJAX获取Json数据与获取多层级的JSON内容解析等
以上是关于AJAX一步到胃的主要内容，如果未能解决你的问题，请参考以下文章