php+ajax+jq

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>JQueryAjax+PHP</title>
  5. <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  6. </head>
  7. <body>
  8. 用户名:<input type="text" id="username" name="username" /><br>
  9. 密码:<input type="password" id="password" name="password" /><br>
  10. <button type="button" class="butn">ajax提交</button><br>
  11. <span class="con"></span>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. $(".butn").click(function(){
  15. var username = $("#username").val();
  16. var password = $("#password").val();
  17. $.post(‘ajax.php‘,{name:username,pwd:password},function(data) {
  18. alert(data);
  19. $(".con").html(data);
  20. })
  21. })
  22. })
  23. </script>
  24. </body>
  25. </html>
<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
    用户名:<input type="text" id="username" name="username" /><br>
    密码:<input type="password" id="password" name="password" /><br>
    <button type="button" class="butn">ajax提交</button><br>
    <span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
    $(".butn").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        $.post(‘ajax.php‘,{name:username,pwd:password},function(data) {
            alert(data);
            $(".con").html(data);
        })
    })
})
</script>
</body>
</html>

ajax.php:

  1. ajax.php
  2. <?php
  3. echo ‘用户名:‘,$_POST[‘name‘],‘,密码:‘,$_POST[‘pwd‘]."<br>";
  4. //这里可以进行一些操作,比如数据库交互
  5. echo "操作完毕";
  6. ?>
ajax.php
<?php
echo ‘用户名:‘,$_POST[‘name‘],‘,密码:‘,$_POST[‘pwd‘]."<br>";
//这里可以进行一些操作,比如数据库交互

echo "操作完毕";
?>

在非json格式下,后台只能返回字符串,如果想后台返回数组,可以采用json格式

例如将JQueryAjax中的代码修改为如下形式:

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>JQueryAjax+PHP</title>
  5. <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  6. </head>
  7. <body>
  8. 用户名:<input type="text" id="username" name="username" /><br>
  9. 密码:<input type="password" id="password" name="password" /><br>
  10. <button type="button" class="butn">ajax提交</button><br>
  11. <span class="con"></span>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. $(".butn").click(function(){
  15. var username = $("#username").val();
  16. var password = $("#password").val();
  17. $.ajax({
  18. url: "ajax.php",
  19. type: "POST",
  20. data:{name:username,pwd:password},
  21. dataType: "json",
  22. error: function(){
  23. alert(‘Error loading XML document‘);
  24. },
  25. success: function(data,status){//如果调用php成功
  26. alert(status);
  27. alert(data);
  28. $(‘.con‘).html("用户名:"+data[0]+"密码:"+data[1]);
  29. }
  30. });
  31. })
  32. })
  33. </script>
  34. </body>
  35. </html>
<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
    用户名:<input type="text" id="username" name="username" /><br>
    密码:<input type="password" id="password" name="password" /><br>
    <button type="button" class="butn">ajax提交</button><br>
    <span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
    $(".butn").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
             url: "ajax.php",
             type: "POST",
             data:{name:username,pwd:password},
             dataType: "json",
             error: function(){
                 alert(‘Error loading XML document‘);
             },
             success: function(data,status){//如果调用php成功
                alert(status);
                alert(data);
                $(‘.con‘).html("用户名:"+data[0]+"密码:"+data[1]);
             }
        });
    })
})
</script>
</body>
</html>
时间: 2024-10-24 08:13:14

php+ajax+jq的相关文章

Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)

Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import method_decorator # 给cbv加上装饰器 from django.views import View from django.views.decorators.csrf import csrf_exempt, csrf_protect ### 在FBV模式下 # csrf_exempt

jq 与原生js 方法互相转换

最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.虽然jq很简单,但是也有兼容问题,js基础是很重要的,jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom.选择元素//jq$('.el');//js   document.query

c# mvc ajax 提交与 接收参数

1.ajax 请求 $.post()是jquery一个简单的 POST 请求功能以取代复杂 $.ajax .参数: url,[data],[callback],[type]url:发送请求地址.data:待发送 Key/value 参数.callback:发送成功时回调函数.type:返回内容格式,xml, html, script, json, text, _default. $.post("/Admin/User/UserAdd", data.field, function (da

mui项目中如何使用原生JavaScript代替jquery来操作dom

转载于:http://www.bcty365.com/content-146-3661-1.html 最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom

赶项目两周后

夜深了,昨天加班到10点,回来公交车已经没有末班车了,一次次的打破下班时间.比较烦躁最近.对我来说一个全新的框架.ofbiz,一个星期我就投入了 编码开发,做的真的好累,一点意思也没有,恶心的跳转,恶心的event,services,screen,感觉真的很弱.前端的ajax,jq,js早 已忘记的差不多,这些技术本来就是弱项,搞得现在做项目真的很吃力,耗时还低质量,失败感太强.试用期三个月即将过去,写好的转正申请已经不想提交,感觉 转意思不大.码农的生活不太好过,必须要突破,不能死写代码下去.

atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传,避免一次使用内存使用过大的 2 2. Uuid还是原来文件名称:: 2 3. 监听器频繁地被调用 2 4. 结合wz easyui 2 4. 选型 2 5. Uploadify::yash js+flash 3 6. commons-fileupload:: 3 7. COS这个工具O'Reilly公司 3 8. 大的文件上传组件总结 3 5. 林吧实现ui Ajax+jq

Blog 入职新公司的一些吐槽!

入职公司已经两个星期了,说真的也很惭愧.我们这小批入职的一共六个人,五个人是实习生,我是唯一一个社招. 所以 我要吐槽 !! 吐槽1 人家都是90后(TAT) 其实真的不要觉得年龄是压力!看看路边KFC大叔人家什么时候创业得,怕个狗啊!再说了!跟一群90后在一起,他们都不会怀疑我得年龄.都以为我也是校招进来得学生,一下觉得自己年轻几岁得节奏.然后还莫名得觉得自己美滋滋.好吧!乐观点(至少比他们工资高 嘿嘿) 吐槽2 JAVA Vs Javascript 其实刚开始我是很郁闷得,不是说好的前端么,

【.Net】Net开发

博客里的好多文章都是本人看着比较好,就转过来的,好少自己亲自去写点什么,也很少把自己学的一点心得于大家分享,今天特别想聊一下,关于本人做Net开发时的那段回忆! 一.关于知识的回忆 还记得Handlere吗? 我记得Handler做图片防盗链时,有这么一个功能! 1 public class ImgHandlerTest: IHttpHandler 2 { 3 public void ProcessRequest(HttpContext context) 4 { 5 Uri url = cont

TP session知识

##############################################################################session知识 TP框架 自动开启sessionsession配置设置:session使用方法:手册中专题支持~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~用法=>在方法中:4个内容 1赋值,参数1名字2value session("uid","zhan