Ajax를 사용하여 페이지를 로드하고 콘텐츠를 삭제하는 방법
- 高洛峰원래의
- 2017-03-12 10:06:451174검색
Ajax의 가장 큰 장점은 삭제할 때 페이지가 점프하지 않는다는 점입니다. 오늘날 대부분의 웹페이지는 Ajax를 사용하여 작성하므로 PHP 코드를 삽입하는 것에 비해 코드 양이 줄어듭니다. 동시에 로딩 페이지도 더 빨라질 것입니다.
다음은 데이터베이스 과일 테이블을 예로 들어 Ajax를 사용하여 작성한 로딩 페이지 및 과일 삭제입니다. 처음에는 ExerciseOkay
This is the Fruit Table
다음은 먼저 PHP 파일main.php
<body>
<h2>内容加载</h2>
<table cellpadding="0" cellspacing="0" border="1" width="100%">
<tr>
<td>水果名称</td>
<td>水果价格</td>
<td>水果产地</td>
<td>操作</td>
</tr>
<tbody id="tb">
</tbody>
</table>
</body>를 생성합니다. 다음으로 페이지의 과일 테이블에 과일 이름, 가격, 원산지 세 열만 표시하도록 선택했습니다. 로드된 처리 페이지를 작성하고 jiazaiym.php
<?php
include("DADB.class.php");
$db=new DADB();
$sql="select * from fruit ";
$arr=$db->Query($sql);
$str="";
foreach($arr as $v)
{
$str=$str.implode("^",$v)."|"; //每一行之间用“|”连接，这样最后就会多出一个“|”
}
$str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式删去
echo $str;
?>로딩 페이지 코드를 작성한 후 정식으로 ajax를 작성하면
<script type="text/javascript">
$.ajax({
url:"jiazaiym.php",
dataType:"TEXT",
success:function(data){
var str = "";
var hang = data.split("|");
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str = str+"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td><input type='button' ids='"+lie[0]+"' class='sc' value='删除'/></td></tr>"
}
$("#tb").html(str);
}
})
</script>참고: ajax 작성시 특히 주의해야 할 점은 세미콜론과 쉼표를 항상 세미콜론으로 써서 결과가 출력되지 않는다는 점입니다. 매우 번거로운 일입니다 로딩 페이지를 작성한 후 shanchu.php 파일을 작성해야 합니다. 페이지를 삭제하는 것은 매우 간단하고 거의 완료되었습니다. 직전에 PHP를 삽입한 것과 동일합니다. <?php
$ids=$_POST["ids"];
include("DADB.class.php");
$db=new DADB();
$sql="delete from fruit where ids={$ids}";
if($db->Query($sql,0))
{
echo"OK";
}
else{
echo"flase";
} 다음은 Ajax를 다시 작성하려고 할 때 페이지를 삭제할 때 내부 클래스를 인식하지 못하기 때문에 작성 후 실행되지 않는 것을 알 수 있습니다. 페이지를 로드하려면 로드된 ajax에 삭제 내용을 넣고 <script type="text/javascript">
Load();
function Load() {
$.ajax({
url: "jiazaiym.php",
dataType: "TEXT",
success: function (data) {
var str = "";
var hang = data.split("|");
for (var i = 0; i < hang.length; i++) {
var lie = hang[i].split("^");
str = str + "<tr><td>" + lie[1] + "</td><td>" + lie[2] + "</td><td>" + lie[3] + "</td><td><input type='button' ids='" + lie[0] + "' class='sc' value='删除'/></td></tr>"
}
$("#tb").html(str);
//删除页面
$(".sc").click(function(){
var ids=$(this).attr("ids");
$.ajax({
url: "shanchu.php",
data: {ids: ids},
type: "POST",
dataType: "TEXT",
success: function (aa) { //去空格
if (aa.trim() == "OK") {
alert("删除成功");
Load();
}
else {
alert("删除失败");
}
}
})
})
}
})
}
</script>를 삭제할 때 호출하면 됩니다. 이렇게 하면 작성하는 데 문제가 없습니다. 위 내용은 Ajax를 사용하여 페이지를 로드하고 콘텐츠를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.