jQuery Ajax请求后台数据并在前台接收
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请求后台数据并在前台接收的更多相关文章
- 前台返回json数据的常用方式+常用的AJAX请求后台数据方式
我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- Ajax请求后台数据
一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...
- JS 操作 HTML 和 AJAX 请求后台数据
为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...
- ajax 请求后台数据返回异常 及 提示404方法名不存在
1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...
- jquery ajax请求后台 的简单例子
jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...
- 【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据
这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <!-- 采用post表单提交 --> <for ...
- 用Ajax请求后台数据
我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <%@ page language="java" contentType=" ...
- jquery ajax获取后台数据后无法输出
今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...
随机推荐
- java常用API之System类
System中代表程序所在系统,提供了对应的一些系统属性信息,和系统操作.System类不能手动创建对象,因为构造方法被private修饰,阻止外界创建对象.System类中的都是static方法,类 ...
- hook_myhook.api.php文件什么用
看源文件的时候发现有个user.api.php文件,里面定义了一个新的钩子,$hook_user_categories,但是,drupal核心里面没有,我推测是自定义 的钩子函数,然后在*.modul ...
- HTML表单特别效果—音量调节，购物数量
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="ra ...
- Protobuf协议的Java应用例子
Protobuf协议,全称:Protocol Buffer 它跟JSON,XML一样,是一个规定好的数据传播格式.不过,它的序列化和反序列化的效率太变态了…… 来看看几张图你就知道它有多变态. Pro ...
- SSH免密钥互信及企业案例
SSH远程免密码: 原理简述:客户端 创建公钥和私钥,公钥是锁,私钥是自己留在客户端的钥匙. 客户端将公钥(锁)发出到服务端,以后自己就能用客户端本地的私钥进行登陆,不用输入密码! 1.客户端,和服 ...
- Oracle 11.1.0.6 导入导出bug
实验环境: 11.1.0.6.0 对ANONYMOUSUSER_ALL表中分区进行备份 SQL> select TABLE_NAME,PARTITION_NAME,HIGH_VALUE,PA ...
- Ural State University Internal Contest October'2000 Junior Session
POJ 上的一套水题,哈哈~~~,最后一题很恶心,不想写了~~~ Rope Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7 ...
- Codeforces Round #521 (Div. 3) D. Cutting Out 【二分+排序】
任意门:http://codeforces.com/contest/1077/problem/D D. Cutting Out time limit per test 3 seconds memory ...
- HDU 5536 Chip Factory 【01字典树删除】
题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=5536 Chip Factory Time Limit: 18000/9000 MS (Java/Ot ...
- Hibernate注解开发示例
-------------------------------------------------------------------customer------------------------- ...