使用ajax基本：
对于第一部分：
服务器端编程是使用服务器支持的语言（例如Java、PHP、C#；可以用JavaScript 编写在服务器端执行的代码）编写在服务器上运行的代码。客户端编程是编写将在客户端运行的代码，并使用浏览器可以执行的语言完成，例如 JavaScript、html 和 css。
对于第二个：
对于 ajax，声明 jQuery Core 很重要。
例子：
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
使用最新版本的 jQuery Core。
了解 AJAX 的工作人员。
Ajax 执行以下步骤：
- 网页中发生事件（加载页面、单击按钮）
- XMLHttpRequest 对象由 JavaScript 创建
- XMLHttpRequest 对象向 Web 服务器发送请求
- 服务器处理请求
- 服务器将响应发送回网页
- JavaScript 读取响应
- 正确的操作（如页面更新）由 JavaScript 执行
欲了解更多请使用此链接：https://www.w3schools.com/xml/ajax_intro.asp https://www.w3schools.com/xml/ajax_intro.asp
配置请求：
url:
类型：字符串
描述：包含请求发送到的 URL 的字符串。
data:
类型：PlainObject 或 String 或 Array
描述：要发送到服务器的数据。如果还不是字符串，它将转换为查询字符串。它附加到 GET 请求的 url 中。请参阅 processData 选项以阻止此自动处理。对象必须是键/值对。如果 value 是一个数组，jQuery 将根据传统设置的值（如下所述）序列化具有相同键的多个值。
数据类型（默认：智能猜测（xml、json、脚本或 html））：
类型：字符串
描述：您期望从服务器返回的数据类型。如果未指定，jQuery 将尝试根据响应的 MIME 类型推断它（XML MIME 类型将生成 XML，在 1.4 JSON 中将生成 JavaScript 对象，在 1.4 脚本中将执行脚本，其他任何内容都将是以字符串形式返回）。可用的类型（以及作为成功回调的第一个参数传递的结果）是：
xml：返回可通过 jQuery 处理的 XML 文档。
html：以纯文本形式返回 HTML；包含的脚本标签在插入 DOM 时会被评估。
script：将响应评估为 JavaScript 并将其作为纯文本返回。通过将查询字符串参数 _=[TIMESTAMP] 附加到 URL 来禁用缓存，除非缓存选项设置为 true。注意：这会将 POST 转换为远程域请求的 GET。
json：将响应评估为 JSON 并返回 JavaScript 对象。跨域“json”请求将转换为“jsonp”，除非请求包含
jsonp: false 在其请求选项中。 JSON数据经过严格解析；任何格式错误的 JSON 都会被拒绝并引发解析错误。从 jQuery 1.9 开始，空响应也会被拒绝；服务器应该返回 null 或 {} 响应。 （有关正确 JSON 格式的更多信息，请参阅 json.org。）
jsonp：使用 JSONP 加载 JSON 块。添加额外的“？callback=？”添加到 URL 末尾以指定回调。通过将查询字符串参数“_=[TIMESTAMP]”附加到 URL 来禁用缓存，除非缓存选项设置为 true。
text：纯文本字符串。
多个空格分隔的值：从 jQuery 1.5 开始，jQuery 可以将 Content-Type 标头中收到的数据类型转换为您需要的数据类型。例如，如果您希望将文本响应视为 XML，请使用“text xml”作为数据类型。您还可以发出 JSONP 请求，将其作为文本接收，并由 jQuery 解释为 XML：“jsonp text xml”。类似地，诸如“jsonp xml”之类的简写字符串将首先尝试从 jsonp 转换为 xml，如果失败，则从 jsonp 转换为文本，然后从文本转换为 xml。
类型（默认：'GET'）：
类型：字符串
描述：用于请求的 HTTP 方法（例如“POST”、“GET”、“PUT”）。 （添加版本：1.9.0）
success:
类型：函数（任何数据，字符串文本状态，jqXHR jqXHR）
描述：请求成功时调用的函数。该函数传递三个参数： 从服务器返回的数据，根据 dataType 参数或 dataFilter 回调函数（如果指定）进行格式化；描述状态的字符串；和 jqXHR（在 jQuery 1.4.x 中，XMLHttpRequest）对象。从 jQuery 1.5 开始，成功设置可以接受函数数组。每个函数都会被依次调用。这是一个 Ajax 事件。
有关配置的更多信息，请使用链接：http://api.jquery.com/jquery.ajax/ http://api.jquery.com/jquery.ajax/
Example:
AJAX:
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'var1': val_1, 'var2': val_2},
success: function (response) {
$('.search-results').html(response);
}
});
PHP:
$val = $_POST['var1'];//recive the values from ajax
$val = $_POST['var2'];
...// The code to recive and create html code.
echo json_encode($html);//send values back to the main page.
对于第三部分也是最后一部分：
- 如何从html调用javascript函数并在两者之间传递参数。使用此链接：如何从html调用javascript函数并通过它传递参数 https://stackoverflow.com/questions/43976734/how-to-call-javascript-function-from-html-and-pass-parameter-through-it/43977414#43977414
一个完整的工作示例：
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var var_1 =
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'q': str},
success: function (response) {
if(response.error_state = ""){
document.getElementById("txtHint").innerHTML = response.html;
}
else{
document.getElementById("txtHint").innerHTML = response.response.error_state;
}
}
});
}
}
</script>
</body>
</html>
服务器端 PHP（teste.php）：
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_POST['q']);
$error_state = "";
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
//die('Could not connect: ' . mysqli_error($con));
$error_state = "<p>"."Could not connect:". mysqli_error($con)."</p>";
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
$html = "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
$html = $html. "<tr>";
$html = $html. "<td>" . $row['FirstName'] . "</td>";
$html = $html. "<td>" . $row['LastName'] . "</td>";
$html = $html. "<td>" . $row['Age'] . "</td>";
$html = $html. "<td>" . $row['Hometown'] . "</td>";
$html = $html. "<td>" . $row['Job'] . "</td>";
$html = $html. "</tr>";
}
$html = $html. "</table>";
mysqli_close($con);
echo json_encode (array(
'html'=>$html,
'error_state'=>$error_state
));
?>
</body>
</html>
有任何疑问，请寻求我的帮助。
干得好！如果有帮助，请不要忘记接受答案。
