Rumah hujung hadapan web tutorial js Ajax与php数据交互详解

Ajax与php数据交互详解

May 12, 2018 am 09:06 AM
ajax php Penjelasan terperinci

本文主要给大家介绍了关于利用Ajax与php数据交互并且局部刷新页面的实现方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,希望能帮助到大家。

什么是Ajax?

国内翻译常为“阿贾克斯”和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据。所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)

下面这篇文章主要介绍的是利用ajax实现与php数据交互,并局部刷新页面的相关内容,下面话不多说,来一起看看详细的介绍:

一、语法简介

1.1 ajax基本语法

$.ajax({
 type: "post",        //数据提交方式(post/get)
 url: "http://xxx/test/demo.php",   //提交到的url
 data: {username:username,password:password},//提交的数据
 dataType: "json",       //返回的数据类型格式


 success: function(msg){
  ...//返回成功的回调函数
 },


 error:function(msg){
  ...//返回失败的回调函数
 }
});
Salin selepas log masuk

1.2 php端的接收方法

<!--?php
 $username=$_POST[&#39;username&#39;]; //接收以post方式提交来的username数据
 $password=$_POST[&#39;password&#39;];
?>
Salin selepas log masuk

二、示例详解

2.1 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>
Salin selepas log masuk

2.2 在demo.html中加入以下js代码

<script>
 $(function(){
 $(&#39;#sub&#39;).click(function(){
  var username=$(&#39;#username&#39;).val();
  var password=$(&#39;#password&#39;).val();
  $.ajax({
  type: "post",
  url: "http://xxx/test/demo.php",
  data: {username:username,password:password}, //提交到demo.php的数据
  dataType: "json", //回调函数接收数据的数据格式

  success: function(msg){
   $(&#39;#text&#39;).empty(); //清空Text里面的所有内容
   var data=&#39;&#39;;
   if(msg!=&#39;&#39;){
   data = eval("("+msg+")"); //将返回的json数据进行解析,并赋给data
   }
   $(&#39;#text&#39;).html("用户名为:" + data.username + ",密码为:" + data.password); //在#text中输出
   console.log(data); //控制台输出
  },

  error:function(msg){
   console.log(msg);
  }
  });
 });
 })
</script>
Salin selepas log masuk

2.3 php端代码demo.php

<!--?php
 header(&#39;Content-type:text/json;charset=utf-8&#39;);
 $username=$_POST[&#39;username&#39;];
 $password=$_POST[&#39;password&#39;];


 $data=&#39;{username:"&#39; . $username . &#39;",password:"&#39; . $password .&#39;"}&#39;;//组合成json格式数据
 echo json_encode($data);//输出json数据
?>
Salin selepas log masuk

三、最终效果如下

相关推荐:

Jquery框架下Ajax与PHP数据交换

thinkphp中ajax与php响应过程详解_PHP

Ajax与PHP

Atas ialah kandungan terperinci Ajax与php数据交互详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Konfigurasi Projek CakePHP Konfigurasi Projek CakePHP Sep 10, 2024 pm 05:25 PM

Dalam bab ini, kita akan memahami Pembolehubah Persekitaran, Konfigurasi Umum, Konfigurasi Pangkalan Data dan Konfigurasi E-mel dalam CakePHP.

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Tarikh dan Masa CakePHP Tarikh dan Masa CakePHP Sep 10, 2024 pm 05:27 PM

Untuk bekerja dengan tarikh dan masa dalam cakephp4, kami akan menggunakan kelas FrozenTime yang tersedia.

Muat naik Fail CakePHP Muat naik Fail CakePHP Sep 10, 2024 pm 05:27 PM

Untuk mengusahakan muat naik fail, kami akan menggunakan pembantu borang. Di sini, adalah contoh untuk muat naik fail.

Penghalaan CakePHP Penghalaan CakePHP Sep 10, 2024 pm 05:25 PM

Dalam bab ini, kita akan mempelajari topik berikut yang berkaitan dengan penghalaan ?

Bincangkan CakePHP Bincangkan CakePHP Sep 10, 2024 pm 05:28 PM

CakePHP ialah rangka kerja sumber terbuka untuk PHP. Ia bertujuan untuk menjadikan pembangunan, penggunaan dan penyelenggaraan aplikasi lebih mudah. CakePHP adalah berdasarkan seni bina seperti MVC yang berkuasa dan mudah difahami. Model, Pandangan dan Pengawal gu

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

Pengesah Mencipta CakePHP Pengesah Mencipta CakePHP Sep 10, 2024 pm 05:26 PM

Pengesah boleh dibuat dengan menambah dua baris berikut dalam pengawal.

See all articles