ajax自己的例程
发布时间：2020-12-16 00:32:27 所属栏目：百科 来源：网络整理
导读：html head titlejQuery Ajax 实例演示/title /head script type="text/javascript" $(document).ready(function(){//这个就是jQueryready ，它就像C语言的main 所有操作包含在它里面 //$.get()方式： $('#test_get').mousedown(function () { var url = '@{Ap
|
<html> <head> <title>jQuery Ajax 实例演示</title> </head> <script type="text/javascript"> $(document).ready(function(){//这个就是jQueryready ，它就像C语言的main 所有操作包含在它里面 //$.get()方式： $('#test_get').mousedown(function () { var url = '@{Application.test()}'; $.get(url,{'str':$("#username").val()},function(data){ alert("name:" + data);$('#result').html("get姓名:" + data);},'text'); }); //$.post()方式： $('#test_post').mousedown(function (){ $.post( '@{Application.test()}',{'str':$('#username').val()},function (data) //回传函数 { $('#result').html("姓名1:" + data); },'text'); }); //ajax方式 $("#button_login").mousedown(function(){ login(); //点击ID为"button_login"的按钮后触发函数 login(); }); }); function login(){ //函数 login(); var username = $("#username").val();//取框中的用户名 var password = $("#password").val();//取框中的密码 var s=username+password; $.ajax({ //一个Ajax过程 type: "post",//以post方式与后台沟通 url : "../Application/test",//与test()沟通 data: 'str=' + s,//发给test()的数据 dataType:'text',//从test()回的值以 JSON方式 解释 success: function(json){//如果调用test()成功 if (json == "") { $('#result').html("姓名:"); } alert("name:" + json); $('#result').html("姓名:" + json); //把php中的返回值显示在预定义的result定位符位置 } }); } </script> <body> <div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div> <form id="formtest" action="@{Application.test()}" method="post"> <p><span>输入姓名:</span><input type="text" name="username" id="username" /></p> <p><span>输入密码:</span><input type="text" name="password" id="password" /></p> </form> <button id="button_login">ajax提交</button> <button id="test_post">post提交</button> <button id="test_get">get提交</button> </body> </html> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |