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. EBS登陆界面IE显示异常

    使用在IE浏览登陆EBS时: 在登陆界面,登录和取消的按钮显示异常: 在进入HOME界面时,显示的职责全为undefined. 原因: 由于IE版本的兼容性. 解决方法: 浏览器 菜单->工具- ...

  2. Js 对象数组，转化为字符串

    var str = [{"cuid":"23910","content":"是","type":&q ...

  3. Android应用开发基础之二：数据存储和界面展现（二）

    常见布局 相对布局 RelativeLayout 组件默认左对齐.顶部对齐 设置组件在指定组件的右边 android:layout_toRightOf="@id/tv1" 设置在指 ...

  4. 亲测可用：SecureCRT 7 注册码/序列号

    Name: ygeR Company:TEAM ZWT SerialNumber:03-77-119256 License Key: ABH2MJ 9YVAC5 Z17QF7 4ZAS7Z ABGYJ ...

  5. java：网络通讯

    网络标准模型:开放式系统模型OSI https://www.cnblogs.com/lydit/articles/4499928.html 理解Scoket通讯:https://www.cnblogs ...

  6. c#中abstract、override、new、virtual、sealed使用和示例

    原文地址:http://blog.csdn.net/richerg85/article/details/7407544 abstract      修饰类名为抽象类,修饰方法为抽象方法.如果一个类为抽 ...

  7. 【CentOS】在Centos7 下无图形界面安装 Oracle11g

    目标 - 在虚拟机CentOS7中无图形界面安装Oracle11G R2版本 ① 系统要求以及准备 1. 物理内存不小于1G: 查看方式: # grep MemTotal /proc/meminfo ...

  8. 通过vue-cli3构建一个SSR应用程序

    1.前沿 1.1.什么是SSR SSR(服务端渲染)顾名思义就是将页面在服务端渲染完成后在客户端直接展示. 1.2.客户端渲染与服务端渲染的区别 传统的SPA模式 即客户端渲染的模式 Vue.js构建 ...

  9. leetcode 198、打家劫舍

    You are a professional robber planning to rob houses along a street. Each house has a certain amount ...

  10. 关于 org.hibernate.TransientObjectException 异常

    在Hibernate的关联关系中,如果一个对象A 持有 对象 B 的引用,如果先保存 A ,再保存B,那么会出现 org.hibernate.TransientObjectException 异常. ...