收藏
批改狀態(tài)：合格
老師批語(yǔ)：
1使用ajax給后臺(tái)發(fā)送數(shù)據(jù)
2.后臺(tái)接收數(shù)據(jù)聽(tīng)通過(guò)for來(lái)遍歷 并返回給前臺(tái)
3.使用success解析數(shù)據(jù)并展示在客戶端
下面是實(shí)例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)字表格</title>
<style type="text/css">
div * {
text-align: center;
}
</style>
</head>
<body>
<fieldset>
<legend>請(qǐng)大哥輸入</legend>
標(biāo)題: <input type="text" id="txt"><br>
行數(shù): <input type="number"><br>
列數(shù): <input type="number"><br>
<br>
<button>生成</button>
<button>重置</button>
</fieldset>
<div></div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
//初始化
var fage=true
//點(diǎn)擊
$('button:first').click(function()
{
if($('#txt').val().length == 0){
alert('請(qǐng)大哥輸入標(biāo)題，謝謝！')
$(this).val(' ')
$(this).focus()
return false
}
$('input[type="number"]').each(function(index,msg){
//空與非數(shù)字判斷
if($(msg).val().length==0){
alert('請(qǐng)大哥輸入數(shù)字，謝謝！')
$(this).val(' ')
$(this).focus()
return false
}
})
if(fage == true){
$.ajax({
//地址 php腳本文件 url:"dome.php",
url:"dome.php",
//數(shù)據(jù)
data:{name:$('input[type="text"]').val(),
rows:$('input[type="number"]').first().val(),
cols:$('input[type="number"]').last().val()},
type:"GET",//請(qǐng)求方法
success:function(data){
$('div').after(data)
}
})
fage = false
}
})
$('button:last').click(function(){
$("input[type]").val(' ')
$('table').remove()
fage=true
$('#txt').focus()
})
})
</script>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
//將下邊的代碼復(fù)制到一個(gè)文件 如 dome.php
<?php
if($_SERVER['REQUEST_METHOD'] == 'GET'){
if(!empty($_GET['rows']) && !empty($_GET['cols'])){
$cols = $_GET['rows'];
$rows = $_GET['cols'];
$name = $_GET['name'];
$table = '<table border="1" cellspacing="0" cellpadding="2" align="center" width="75%">';
//標(biāo)頭
$table .='<caption><h3>'.$name.'</h3></caption>';
//標(biāo)題
$table .='<tr align="center">' ;
for($i = 0; $i < $cols; $i++ ){
$table .= "<th>無(wú)</th>";
}
$table .="</tr>" ;
//表格
for($p = 0; $p < $rows; $p++ ){
$table .="<tr>" ;
for($k = 0; $k < $cols; $k++ ){
$data = $p*$cols+$k;
$table .= "<td>{$data}</td>";
}
$table .="</tr>" ;
}
$table .= "</table>";
echo $table;
exit();
}
}點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)