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. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  2. Hadoop基本开发环境搭建（原创，已实践）

    软件包: hadoop-2.7.2.tar.gz hadoop-eclipse-plugin-2.7.2.jar hadoop-common-2.7.1-bin.zip eclipse  jdk1.8 ...

  3. 智能打印SDK---官方博客

    (开源准备:开源为百度云打包开源,GIT太慢,SVN没有免费的,TFS有免费的也慢的要命) 开源地址:http://pan.baidu.com/s/1miobLoO 电子商务越来越成熟,提供的服务越来 ...

  4. chrome浏览器美化插件：让你的浏览器页面冒水泡, 游小鱼儿

    下载插件和效果图 这是一个让你的浏览器冒泡泡的插件, 浏览网页的时候仿佛置身于海底世界: 插件下载地址:http://files.cnblogs.com/files/diligenceday/chro ...

  5. dedecms织梦自定义表单提交之后如何发送到邮箱!

    但是往往一些客户需要做一些提交信息到后台并发送到指定的邮箱. 一.直接打开plus下面的diy.php文件:  85行:$query = "INSERT INTO `{$diy->ta ...

  6. 信号处理——傅里叶变换(FT-DTFT-DFT)

    作者:桂. 时间:2017-01-17  23:41:13 链接:http://www.cnblogs.com/xingshansi/articles/6294111.html 声明:转载请注明出处, ...

  7. One Card Poker

    qsc oj 题目 提交 比赛 小组 排名 帮助 Mactavish 题目 我的提交 One Card Poker 发布时间: 2017年2月14日 14:02   最后更新: 2017年2月14日 ...

  8. 算法模板——Dinic网络最大流 1

    实现功能:同sap网络最大流 今天第一次学Dinic,感觉最大的特点就是——相当的白话,相当的容易懂,而且丝毫不影响复杂度,顶多也就是代码长个几行 主要原理就是每次用spfa以O(n)的时间复杂度预处 ...

  9. Node软件的安装

    1.官网网址:https://nodejs.org/en/ 左边被推荐,右边最新 下载完成一键下一步直接安装,当然,如果你想修改安装目录的话当然没问题,注意:不要有英文目录 2.Window+r打开命 ...

  10. Microsoft Visual Studio 2017 安装过程

    工欲善其事必先利其器 Visual Studio 2017 正式版官方下载地址:https://www.visualstudio.com/downloads/ 安装vs2017的时候最好关闭已打开的v ...