利用ajax实现与php数据交互,并局部刷新页面

本文主要有以下几个要点:

ajax的基本语法结构

jQuery基本语法

json数组基本结构

ajax回调函数中的json数组解析及局部刷新

php基本语法

ajax与php的对接

php中post数据提交方式与接收

ajax基本语法
$.ajax({
type: "post", //数据提交方式(post/get)
url: "demo.php", //提交到的url
data: {username:username,password:password},//提交的数据
dataType: "json",//返回的数据类型格式
success: function(msg){
...//返回成功的回调函数
},
error:function(msg){
...//返回失败的回调函数
}
});
php端的接收方法
<?php
$username=$_POST[‘username‘];//接收以post方式提交来的username数据
$password=$_POST[‘password‘];

<?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数据
<!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>

<script>
  $(function(){
    $(‘#sub‘).click(function(){
      var username=$(‘#username‘).val();
      var password=$(‘#password‘).val();
      $.ajax({
        type: "post",
        url: "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>
</html>

原文地址:https://www.cnblogs.com/fuhuo/p/11230806.html

时间: 2024-10-09 12:35:49

利用ajax实现与php数据交互,并局部刷新页面的相关文章

AJAX+REA实现前后台数据交互的加密解密

AJAX+REA实现前后台数据交互的加密解密 1.创建js文件Encryption.js /**  * 加密解密  */ /** RSA加密用 生成key */ function bodyRSA(){ /** 1024位的key参数写130,2014位的key参数写260 */ setMaxDigits(130); /** ajax 调用后台方法,取回公钥 */ var keyR ;     $.ajax({      url: "/GHGL/Key/pk",//请求后台的url,本例

ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝试,中途也遇到了不少问题.今天就来讨论一下其中之一的问题,WebAPI与前端Ajax 进行跨域数据交互时,由于都在不同的二级域名下(一级域名相同),导致Cookies数据无法获取. 最开始通过头部(Header)将Cookies传输到其WebAPI,也能解决问题. 下面讲述另外一种解决方案. 解决过

ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝试,中途也遇到了不少问题.今天就来讨论一下其中之一的问题,WebAPI与前端Ajax 进行跨域数据交互时,由于都在不同的二级域名下(一级域名相同),导

vue删除表格内的数据后局部刷新页面

遇到的问题:如标题. https://www.cnblogs.com/Yachne/p/11864523.html 上面博客,第一眼没看太懂,所以打算整理一下 解决思路:把调用api,加载数据做成一个方法(onSeach),用created初始化,再在删除/添加方法里重新加载该方法(onSeach),这样就实现了页面局部刷新页面. 另有两个方法会刷新整个页面,造成短暂空白,不太建议用. location.reload() this.$router.go(0) 把加载页面数据的请求做成一个方法 这

jQuery Ajax 前端和后端数据交互的问题

原理:前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收1)提交表单数据2)提交JSON数据 后端的数据接收与响应1)接收GET请求数据2)接收POST请求数据3)响应请求 1.提交表单数据 1)GET请求 1 var data = { 2 "name": "test", 3 "age": 1 4 }; 5 $.ajax({ 6 type: 'GET', 7 url:

ASP.NET使用ajax实现分页局部刷新页面

listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) <asp:ListView ID="newBlogItems" runat="server" DataSourceID="AccessDataSource1" ViewStateMode="Disabled"> <

爬虫实例 利用Ajax爬取微博数据

随着代理IP技术的普及,爬虫的使用也变得简单起来,许多企业和个人都开始用爬虫技术来抓取数据.那么今天就来分享一个爬虫实例,帮助你们更好的理解爬虫.下面我们用程序模拟Ajax请求,将我的前10页微博全部爬取下来.首先,定义一个方法来获取每次请求的结果.在请求时,page是一个可变参数,所以我们将它作为方法的参数传递进来,相关代码如下:首先,这里定义了base_url来表示请求的URL的前半部分.接下来,构造参数字典,其中type.value和containerid是固定参数,page是可变参数.接

利用ajax从txt读取数据

html代码: <div id="news"></div> txt: [ {"id":"1", "news":"通知:直面企业社保痛点--为什么企业社保外包成趋势","url":"http://www.baidu.com"}, {"id":"2", "news":"一个好的H

数据交互 - Ajax初体验

2016-10-22 12:22:42 相关概念 AJAX(Asynchronous Javascript And XML)即"异步JavaScript和XML": 是指一种实现客户端和服务器的数据传递的网页开发技术: 核心:局部刷新,异步加载: 即"在不需要刷新页面的情况下,就可以与Web服务器交换数据,产生局部刷新的效果". 基础步骤 第一步 :先创建AJAX对象 1 /*兼容处理*/ 2 var xhr; //声明AJAX对象变量 3 if(window.XM