JS/HTML 与后台数据交互基础案例详解

下面列举 3 种常用的方法。

1. form 表单提交

普通的 form 表单提交数据时，页面会跳转到提交地址页。

这里提交的地址 http://localhost/index.php 代码为:

  echo 'GET--'.json_encode($_GET).'
';
  echo 'POST--'.json_encode($_POST).'
';
  echo 'FILES--'.json_encode($_FILES).'
';
  echo 'REQUEST--'.json_encode($_REQUEST).'
';
?>

1.一个简单的get请求

<form action="http://localhost">
  账号：<input type="text" name="user">
  密码：<input type="password" name="pass">
  <input type="submit" value="提交">
form>  


GET--{"user":"abc","pass":"123456"}
POST--[]
FILES--[]
REQUEST--{"user":"abc","pass":"123456"}

2.一个简单的POST请求

<form action="http://localhost" method="post">
  账号：<input type="text" name="user">
  密码：<input type="password" name="pass">
  <input type="submit" value="提交">
form>  


GET--[]
POST--{"user":"abc","pass":"123456"}
FILES--[]
REQUEST--{"user":"abc","pass":"123456"}

3.带有下拉框和多选框的GET请求 – 单个

<form action="http://localhost">
  账号：<input type="text" name="user">
  密码：<input type="password" name="pass">
  <select name="acc">
    <option value="1">有钱option>
    <option value="2">有权option>
    <option value="3">有地位option>
  select>
  爱好：<input type="checkbox" name="loves1" value="look">看书
        <input type="checkbox" name="loves2" value="run">跑步
        <input type="checkbox" name="loves3" value="computer">上网
  性别：<input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
  <input type="submit" value="按钮">
form>


GET--{"user":"abc","pass":"123456","acc":"3","loves1":"look","loves2":"run","sex":"woman"}
POST--[]
FILES--[]
REQUEST--{"user":"abc","pass":"123456","acc":"3","loves1":"look","loves2":"run","sex":"woman"}

4.带有下拉框和多选框的GET请求 – 多个
多选框使用同一个字段名时可以在该字段名后加上 [] 符号。

<form action="http://localhost">
  账号：<input type="text" name="user">
  密码：<input type="password" name="pass">
  <select name="acc[]" multiple>
    <option value="1">有钱option>
    <option value="2">有权option>
    <option value="3">有地位option>
  select>
  爱好：<input type="checkbox" name="loves[]" value="look">看书
        <input type="checkbox" name="loves[]" value="run">跑步
        <input type="checkbox" name="loves[]" value="computer">上网
  性别：<input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
  <input type="submit" value="按钮">
form>


GET--{"user":"abc","pass":"123456","acc":["1","2"],"loves":["look","run"],"sex":"woman"}
POST--[]
FILES--[]
REQUEST--{"user":"abc","pass":"123456","acc":["1","2"],"loves":["look","run"],"sex":"woman"}

5.含有文件上传 – 单个文件

<form action="http://localhost" enctype="multipart/form-data" method="post">
  账号：<input type="text" name="user">
  密码：<input type="password" name="pass">
  文件：<input type="file" name="file1">
        <input type="file" name="file2">
  <input type="submit" value="按钮">
form>


GET--[]
POST--{"user":"abc","pass":"123456"}
FILES--{
          "file1":{
            "name":"a.jpg",
            "type":"image\/jpeg",
            "tmp_name":"C:\\APMServ5.2.6\\tmp\\uploadtemp\\php859A.tmp",
            "error":0,
            "size":2811667
          },
          "file2":{
            "name":"b.txt",
            "type":"text\/plain",
            "tmp_name":"C:\\APMServ5.2.6\\tmp\\uploadtemp\\php85CA.tmp",
            "error":0,
            "size":13
          }
        }
REQUEST--{"user":"abc","pass":"123456"}

6.含有文件上传 – 多个文件
多文件上传使用同一个字段名时需要在该字段名后加上 [] 符号。

<form action="http://localhost" enctype="multipart/form-data" method="post">
  账号：<input type="text" name="user">
  密码：<input type="password" name="pass">
  文件：<input type="file" name="file[]">
        <input type="file" name="file[]">
  <input type="submit" value="按钮">
form>


GET--[]
POST--{"user":"abc","pass":"123456"}
FILES--{
  "file":{
    "name":["a.jpg","b.txt"],
    "type":["image\/jpeg","text\/plain"],
    "tmp_name":[
      "C:\\APMServ5.2.6\\tmp\\uploadtemp\\php4977.tmp",
      "C:\\APMServ5.2.6\\tmp\\uploadtemp\\php49A6.tmp"
    ],
    "error":[0,0],
    "size":[2811667,13]
  }
}
REQUEST--{"user":"abc","pass":"123456"}

2. ajax 原生代码提交

ajax 提交数据时，页面无刷新，不会跳转。

提交的地址 http://localhost/index.php 代码为:

  //允许跨域，允许任何方式的提交，任意请求头
  header("Access-Control-Allow-Origin:*");
  header("Access-Control-Allow-Methods:*");
  header('Access-Control-Allow-Headers:*');

  echo 'GET--'.json_encode($_GET);
  echo 'POST--'.json_encode($_POST);
  echo 'FILES--'.json_encode($_FILES);
  echo 'REQUEST--'.json_encode($_REQUEST);
?>

1.一个简单的get请求

var xhr = new XMLHttpRequest();
xhr.onload = function(event){
  console.log(xhr.responseText)
}
xhr.open("GET","http://localhost?user=abc&pass=123456");                           
xhr.send();

/*页面控制台打印输出：
  GET--{"user":"abc","pass":"123456"}
  POST--[]
  FILES--[]
  REQUEST--{"user":"abc","pass":"123456"}
*/

2.一个简单的post请求

var xhr = new XMLHttpRequest();
xhr.onload = function(event){
  console.log(xhr.responseText)
}
xhr.open("POST","http://localhost");   
//post请求必须设置 "Content-type" 类型为 "application/x-www-form-urlencoded"
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("user=abc&pass=123456");
/*页面控制台打印输出：
  GET--[]
  POST--{"user":"abc","pass":"123456"}
  FILES--[]
  REQUEST--{"user":"abc","pass":"123456"}
*/

3.post 请求，提交 FormData 数据

文件：<input type="file" id="fs" multiple>
<button id="btn">提交button>
<script>
var fs = document.getElementById("fs");
var btn = document.getElementById("btn");
/*
  给input添加属性 multiple 可多选
  按住 alt 键，选中 a.jpg, b.jpg 上传2张图片
*/
btn.onclick = function(){
  var files = fs.files;
  var obj = new FormData();
  obj.append('user', "abc");             //添加普通文本数据
  obj.append('pass', 123456);            //添加普通文本数据
  obj.append('pic1', files[0]);          //添加一个文件流,默认文件名是该文件的名称
  obj.append('pic2', files[1], 'c.jpg'); //指定文件流名称
  obj.append('pics[]', files[0], 'c1.jpg'); 
  obj.append('pics[]', files[1], 'c2.jpg'); //同一个键名添加多个值

  var xhr = new XMLHttpRequest();
  xhr.onload = function(event){
    console.log(xhr.responseText)
  }
  xhr.open("POST","http://localhost");                           
  xhr.send(obj);
}
/*页面控制台打印输出：
  GET--[]
  POST--{"user":"abc","pass":"123456"}
  FILES--{
    "pic1":{
      "name":"a.jpg",
      "type":"image\/jpeg",
      "tmp_name":"C:\\APMServ5.2.6\\tmp\\uploadtemp\\phpD23C.tmp",
      "error":0,
      "size":2811667
    },
    "pic2":{
      "name":"c.jpg",
      "type":"image\/jpeg",
      "tmp_name":"C:\\APMServ5.2.6\\tmp\\uploadtemp\\phpD26C.tmp",
      "error":0,
      "size":189560
    },
    "pics":{
      "name":["c1.jpg","c2.jpg"],
      "type":["image\/jpeg","image\/jpeg"],
      "tmp_name":[
        "C:\\APMServ5.2.6\\tmp\\uploadtemp\\phpD27C.tmp",
        "C:\\APMServ5.2.6\\tmp\\uploadtemp\\phpD29D.tmp"
      ],
      "error":[0,0],
      "size":[2811667,189560]
    }
  }
  REQUEST--{"user":"abc","pass":"123456"}
*/
script>

4.FormData 对象与表单的结合

<form action="http://localhost" id="form">
  账号：<input type="text" name="user">
  文件：<input type="file" name="file1">
form>
<button id="btn">提交button>

<script>
var form = document.getElementById("form");
var btn = document.getElementById("btn");

/*文件选中 b.txt ,然后点击"提交"*/
btn.onclick = function(){
  var obj = new FormData(form);
  obj.append('pass', 123456);                 
  var xhr = new XMLHttpRequest();
  xhr.onload = function(event){
    console.log(event.target.response)
  }
  xhr.open("POST",form.action);                           
  xhr.send(obj);
}
/*页面控制台打印输出： 
GET--[]
POST--{"user":"abc","pass":"123456"}
FILES--{
          "file1":{
            "name":"b.txt",
            "type":"text\/plain",
            "tmp_name":"C:\\APMServ5.2.6\\tmp\\uploadtemp\\php3EE9.tmp",
            "error":0,
            "size":13
          }
        }
REQUEST--{"user":"abc","pass":"123456"}
*/
script>

3. Jquery 中的 ajax 封装使用

提交的地址 http://localhost/index.php 代码为:

  //允许跨域，允许任何方式的提交，任意请求头
  header("Access-Control-Allow-Origin:*");
  header("Access-Control-Allow-Methods:*");
  header('Access-Control-Allow-Headers:*');

  echo 'GET--'.json_encode($_GET);
  echo 'POST--'.json_encode($_POST);
  echo 'FILES--'.json_encode($_FILES);
  echo 'REQUEST--'.json_encode($_REQUEST);
?>

1.一个简单的get请求

//方式一
$.ajax({
  url:"http://localhost",
  data:{ user:"abc", name:123456 },
  success:function(res){
    console.log(res)     
  }
})
//方式二
$.get("http://localhost",{user:"abc",pass:123456},function(res){
  console.log(res)  
})
/*页面控制台输出：
  GET--{"user":"abc","name":"123456"}
  POST--[]
  FILES--[]
  REQUEST--{"user":"abc","name":"123456"}
*/

2.一个简单的post请求

//方式一
$.ajax({
  url:"http://localhost",
  type:"post",
  data:{ user:"abc", name:123456 },
  success:function(res){
    console.log(res)   
  }
});
//方式二
$.post("http://localhost",{user:"abc",pass:123456},function(res){
  console.log(res)  
});
/*页面控制台输出：
  GET--[]
  POST--{"user":"abc","name":"123456"}
  FILES--[]
  REQUEST--{"user":"abc","name":"123456"}
*/

3.表单系列化

<form id="form">
  账号：<input type="text" name="user">
  密码：<input type="password" name="pass">
form>
<button id="btn">提交button>

<script>
/* 账号输入"abc",密码输入"123456"，然后提交*/
$("#btn").click(function(){
  $.ajax({
    url:"http://localhost",
    type:"post",
    data:$("#form").serializeArray(),
    success:function(res){
      console.log(res)    
    },
  })
})
/*页面控制台输出：
  GET--[]
  POST--{"user":"abc","name":"123456"}
  FILES--[]
  REQUEST--{"user":"abc","name":"123456"}
*/
script>

4.包含文件上传

<form id="form">
  账号：<input type="text" name="user">
  密码：<input type="password" name="pass">
  文件：<input type="file" name="fff">
form>
<button id="btn">提交button>

<script>
/* 账号输入"abc",密码输入"123456"，文件选中a.jpg, 然后提交*/
$("#btn").click(function(){
  $.ajax({
    url:"http://localhost",
    type:"post",
    processData: false,               //必须，不处理数据
    contentType: false,               //必须，不设置类型
    data:new FormData($("#form")[0]),
    success:function(res){
      console.log(res)    
    },
  })
})
/*页面控制台输出：
GET--[]
POST--{"user":"abc","pass":"123456"}
FILES--{
    "fff":{
      "name":"a.jpg",
      "type":"image\/jpeg",
      "tmp_name":"C:\\APMServ5.2.6\\tmp\\uploadtemp\\php4766.tmp",
      "error":0,
      "size":2811667
    }
  }
REQUEST--{"user":"abc","pass":"123456"}
*/
script>