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>

php+ajax+jq的更多相关文章

  1. 原生ajax jq跨域

    原生js封装ajax //创建XmlhttpRequest对象 function createXHR(){     var xhr=null;     if(XMLHttpRequest){      ...

  2. Ajax Jq Razor语句

    1.JS刷新当前页面: window.location.reload(); 2.JSon成功后转向其他页面: window.location.href="要转向页面的地址(一般格式:/页面所 ...

  3. Ajax——jq中ajax的使用

    格式化表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. ajax jQ写的上传进度条

    XML/HTML Code <form id="myForm" action="upload.php" method="post" e ...

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

    Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...

  6. ajax、fetch、axios — 请求数据

    jquery ajax jq 的ajax是对原生XHR的封装,除此以外还增添了对JSONP的支持.用起来非常方便 用法: $.ajax({ url:发送请求的地址, data:数据的拼接,//发送到服 ...

  7. 潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)

    js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. jq 与原生js 方法互相转换

    最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.虽然jq很简单,但是也有兼容问题,js基础是很重要的,jq的成功当时是因为ie6.7.8.9.10.chrom ...

  9. laravel7 H-ui模板ajax修改（资源路由）

    1:列表首页设置点击事件,并将id传至后台,查询数据 <td class="f-14"><a title="编辑" href="ja ...

随机推荐

  1. Java集合框架之三：HashMap源码解析

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! HashMap在我们的工作中应用的非常广泛,在工作面试中也经常会被问到,对于这样一个重要的集合模型我们有必要弄清楚它的使用方法和它底层的实 ...

  2. awk,sed文本处理案例

    #!/bin/bash ############################################################################# #针对一个多级目录下 ...

  3. 自行搭建私有云ownCloud，启用SSL，其他配置

    ownCloud简介 ownCloud(官网)是一款开源的私有云框架,可以通过它实现个人网盘的功能,如果拥有一个性能不错的VPS,那么就可以摆脱奇慢无比的百度云等网盘啦!我花了大约一天的时间总算搭好了 ...

  4. C#之系统异常处理机制

    在系统开发过程中,BUG和异常产生是无处不在的,但是需要我们去做的就是不断去发掘异常.修改异常. 这篇文章主要谈谈我在系统中解决异常的几种方法: 1.控制台程序产生的异常: 在大多数的控制台程序中,运 ...

  5. web性能优化 来自《web全栈工程师的自我修养》

    最近在看<web全栈工程师的自我修养>一书,作者是来自腾讯的前端工程师.作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验,应聘者思索后回答“在发布项目之前压缩css和 Java ...

  6. 每天一个linux命令(42)--traceroute命令

    通过traceroute 我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不 ...

  7. 项目架构开发：数据访问层之Repository

    接上文 项目架构开发:数据访问层之Logger 本章我们继续IRepository开发,这个仓储与领域模式里边的仓储有区别,更像一个工具类,也就是有些园友说的“伪仓储”, 这个仓储只实现单表的CURD ...

  8. ThinkPHP框架知识的注意点

    ThinkPHP框架 访问入口文件后在application文件夹中会出现一些文件夹,其中的home文件夹是前端模块,也可以在application文件夹中新建文件夹.home文件夹模块中Conf文件 ...

  9. [HDU1210] Eddy's 洗牌问题

    Problem Description Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如果他有2N张牌,编号为1,2,3..n,n+1,..2n.这也是 ...

  10. Spring+SpringMVC+MyBatis+easyUI整合基础篇（九）版本控制

    日常啰嗦 还好在第一篇文章里就列好了接下来的主线及要写的知识点,不然都不知道要写什么东西了,开篇里已经列了基础篇要讲svn和git的知识点,所以这一篇就写一下版本控制. 项目实际效果展示在这里,账密: ...