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

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

1. form 表单提交

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

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

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

1.一个简单的get请求

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

<!-- 账号输入：abc, 密码输入：123456， 点击‘提交’按钮后页面显示 -->
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>  

<!-- 账号输入：abc, 密码输入：123456， 点击‘提交’按钮后页面显示 -->
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">女