jQuery简单的Ajax调用
Posted 低头捡到蛋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery简单的Ajax调用相关的知识，希望对你有一定的参考价值。
index.php 的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--引入jQuery文件--> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#testAjax").click(function(){ showUser(); }); }); function showUser(){ var name = $("#name").val(); var sports = $("#selectName").val(); // alert(a); $.ajax({ url:"server.php", type: "POST", data: { name:name, sports:sports }, dataType:"html", error: function(data){ alert("error"); console.log(data) }, success: function(data){ $(\'#txtHint\').html(data); // alert(data); }, }) } </script> </head> <body> <form> 姓名：<input type="text" id="name"><br><br> 喜欢的运动：<select id="selectName"> <option value="0">篮球</option> <option value="1">足球</option> <option value="2">排球</option> <option value="3">桌球</option> <option value="4">乒乓球</option> </select> </form> <br> <div id="txtHint">显示内容</div><br> <button id="testAjax" type="button">Ajax改变内容</button> </body> </html>
服务器页面 server.php 的代码如下：
<?php if($_POST[\'name\'] != "" && $_POST[\'sports\'] != ""){ switch($_POST[\'sports\']){ case 0: echo $_POST[\'name\']."这小子喜欢篮球"; break; case 1: echo $_POST[\'name\']."这小子喜欢足球"; break; case 2: echo $_POST[\'name\']."这小子喜欢排球"; break; case 3: echo $_POST[\'name\']."这小子喜欢桌球"; break; default: echo $_POST[\'name\']."这小子喜欢乒乓球"; } }else{ echo "请输入姓名和选择喜欢的运动"; } ?>
运行index.php，将数据用POST方式发送到server.php页面，执行完成后返回并将数据发送回 "txtHint" 占位符，运行结果如下:
以上是关于jQuery简单的Ajax调用的主要内容，如果未能解决你的问题，请参考以下文章
AJAX的一个简单实例，跨域的解决，使用JQuery来进行ajax的调用
Ajax 调用失败。使用 Jquery .ajax 函数发出简单的请求