1.ajax基本语法

<script>

 $(function(){

 $('#sub').click(function(){

  var username=$('#username').val();

  var password=$('#password').val();

  $.ajax({

  type: "post",

  url: "http://xxx/test/demo.php",

  data: {username:username,password:password}, //提交到demo.php的数据

  dataType: "json", //回调函数接收数据的数据格式

  success: function(msg){

   $('#text').empty(); //清空Text里面的所有内容

   var data='';

   if(msg!=''){

   data = eval("("+msg+")"); //将返回的json数据进行解析，并赋给data

   }

   $('#text').html("用户名为：" + data.username + ",密码为：" + data.password); //在#text中输出

   console.log(data); //控制台输出

  },

  error:function(msg){

   console.log(msg);

  }

  });

 });

 })

</script>

2. php端的接收方法

<!--?php

 header('Content-type:text/json;charset=utf-8');

 $username=$_POST['username'];

 $password=$_POST['password'];

 $data='{username:"' . $username . '",password:"' . $password .'"}';//组合成json格式数据

 echo json_encode($data);//输出json数据

?>

3.html端代码demo.html

<!doctype html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>ajaxTest</title>

</head>

<body>

 <input type="text" id="username">

 <input type="text" id="password">

 <button id="sub">查询</button>

 <span id="text"></span><!-- 用以显示返回来的数据，只刷新这部分地方 -->

</body>

<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>

</html>

jQuery Ajax请求后台数据并在前台接收的更多相关文章

  1. 前台返回json数据的常用方式+常用的AJAX请求后台数据方式

    我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...

  2. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  3. Ajax请求后台数据

    一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...

  4. JS 操作 HTML 和 AJAX 请求后台数据

    为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...

  5. ajax 请求后台数据返回异常 及 提示404方法名不存在

    1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...

  6. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

  7. 【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据

    这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <!-- 采用post表单提交 --> <for ...

  8. 用Ajax请求后台数据

    我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <%@ page language="java" contentType=" ...

  9. jquery ajax获取后台数据后无法输出

    今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...

随机推荐

  1. OLEDB 静态绑定和数据转化接口

    OLEDB 提供了静态绑定和动态绑定两种方式,相比动态绑定来说,静态绑定在使用上更加简单,而在灵活性上不如动态绑定,动态绑定在前面已经介绍过了,本文主要介绍OLEDB中的静态,以及常用的数据类型转化接 ...

  2. Bootstrap组件介绍

    一.下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 1.实例 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 ...

  3. android Viewpager取消预加载及Fragment方法的学习

    1.在使用ViewPager嵌套Fragment的时候,由于VIewPager的几个Adapter的设置来说,都会有一定的预加载.通过设置setOffscreenPageLimit(int numbe ...

  4. [C#] SHA1校验函数用法

    首先引用这个命名空间 using System.Security.Cryptography; //建立SHA1对象 SHA1 sha = new SHA1CryptoServiceProvider() ...

  5. stopPropagation()阻止事件向父容器传递

    topPropagation()函数用于阻止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函数 ...

  6. #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目（二）

    学习对vue组件进行单元测试,先参照官网编写组件和测试脚本. 1.简单的组件 组件无依赖,无props 对于无需导入任何依赖,也没有props的,直接编写测试案例即可. /src/testSrc/si ...

  7. Oracle分区表分批迁移

    遇到个分区表数据量超大的case,磁盘空间不够,所以考虑使用数据泵分批导数据,测试如下: source : oracle windows 32bit 10.2.0.1target  :  oracle ...

  8. 长大Tips的第二步

    由于期末将至的缘故,组员们对于这次项目都开始表现出了懈怠的情绪,故而这一次并没有完成许多实质性的任务,相较于上一次,此次增添了登陆以及注册的功能,说来惭愧,虽然已经学习了数据库编程,可惜自己学艺不精并 ...

  9. 面条代码 vs. 馄沌代码

    转载自:https://blog.csdn.net/godsme_yuan/article/details/6594013

  10. Android（java）学习笔记48：通过反射获得带参构造方法并且使用

    1. 反射获得带参构造方法并且使用: (1)获取字节码文件对象       Class c = Class.forName("cn.itcast_01.Person"); (2)获 ...