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. 关于input 中 hidden属性在后台作用的实例

    在双模的项目中,我遇到了一个问题,我公司的双模项目是基于ECShop的框架,在完成订单列表的页面时,我写了两个form表单来单独传输数据,第一个表单是用来做搜素的,第二个表单是用来显示表单信息的,在控 ...

  2. Spring MVC工程 无法拦截到url请求

    一直没有办法拦截到url的请求,tomcat启动也没有看到Springmvc容器启动的任何说明.所以就建立了一个普通的servlet工程,可以访问url.再重新发布springmvc项目,访问url, ...

  3. Flask环境github及项目部署(十三)

    (1) github项目搭建 1 连接GitHub hostnamectl set-hostname flask-dev # 设置 hostname,一般是主机名可以不更改 ssh-keygen # ...

  4. WAKE-WIN10-SOFT-VS2013及工具

    1,下载安装,,,,,,, 2,配置 3opencv 3,1官网:http://opencv.org/ 3,3VS2013+OPENCV249配置 http://jingyan.baidu.com/a ...

  5. FIFO认识（一）

    1．什么是FIFO? FIFO是英文First In First Out 的缩写,是一种先进先出的数据缓存器,他与普通存储器的区别是没有外部读写地址线,这样使用起来非常简单,但缺点就是只能顺序写入数据 ...

  6. 如何通过一个SAPGUI屏幕反查这个屏幕对应的事务码

    假设我通过某种跳转方式打开了下图这个SAPGUI的屏幕,但我想搞清楚用哪一个事务码可以直接到达这个屏幕,而不通过繁琐的点击,应该怎么做? 步骤1,点击Order字段,按F1打开帮助界面, 点上图的图标 ...

  7. SAPGUI里实现自定义的语法检查

    需求:在SAPGUI里点击这个语法检查的小图标或者直接按快捷键Ctrl+F2可以执行ABAP标准的语法检查. 如果需要实现SAPGUI里自定义的语法检查,比如,某团队强制要求应用程序类的每个方法的实现 ...

  8. ABAP git客户端

    Jerry习惯把自己写的小程序放到自己的github上:https://github.com/i042416 对于写的ABAP程序,需要先把SAPGUI里的代码手动拷贝到本地,然后用git客户端pus ...

  9. 第一次在stack overflow回答问题

    越发感觉英语的重要性,尝试阅读英文与写作英文.于是选择了stack overflow来进行实践.作为萌新小白,只学习过C语言,就在c标签下乱逛.尝试看懂一些问题且试着回答. 发现一个问题: I nee ...

  10. The Tao to Excellent 2

    就算自己现在的技术水平很菜,就算自己现在写的代码还是很烂,但我们还是要一直坚持在最前线,一直向上,也许,在前方,就有不一样的风景在等着我们. 因为我深深明白到一件事:人之所以选择混吃等死,是因为他们根 ...