AJAX备忘录

很郁闷,花了很长时间才找出这个bug:javascript 中写方法时不要把方法名 定义为: function start()  ,不信你试试,web页面是不能正确使用的! 我想start()这个名字是保留字或者禁用的把,具体原应不知道。

下面是我今下午做的例子代码:

ajax.js

//  JavaScript Document

var  xmlhttp;
function  createxmlhttprequest()
{
    
if(window.ActiveXObject)
    
{
        xmlhttp 
= new ActiveXObject("Microsoft.XMLHTTP");
    }

    
else if(window.XMLHttpRequest)
    
{
        xmlhttp 
= new XMLHttpRequest();
    }

}


function  starts()
{
    alert(
"begin AJAX .....");
    
    createxmlhttprequest();
    
    xmlhttp.onreadystatechange 
= handlechange;
    xmlhttp.open(
"get","163.xml",true);
    xmlhttp.send(
null);
}


function  handlechange()
{
    
if(xmlhttp.readyState==4)
    
{
        
if(xmlhttp.status==200)
        
{
            readxml();
            }

        
        }

}


function  readxml()
{
    
var xmldoc=xmlhttp.responseXML;
    
var node=xmldoc.getElementsByTagName("content")[0];
    
var content=node.childNodes[0].nodeValue;
    
//alert(content);
    //document.getElementById("div1").innerHTML=content;
      document.getElementById("div1").innerHTML = content;
}

test.jsp

<% @ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage=""  %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > ajax </ title >
< script   src ="js/ajax.js" ></ script >
</ head >

< body >

< div  id ="all" >
    
< form  action ="#" >
        
< input  name =""  type ="button"   value ="open xml"  onclick ="starts();" />
    
</ form >
    
    
< href ="#"  onclick ="starts();" > goajax </ a >
    
< hr  />
    
< div  id ="div1" >   
    waiting open xmlfile.............
    
</ div >
</ div >     
</ body >
</ html >

163.xml

 

<? xml version="1.0" encoding="GB2312" ?>
< document >
     
< title > 网易通行证服务条款 </ title >
     
< author > 163 </ author >
     
< content > 猫扑网(mop.com)服务使用协议(修订版) </ content >
</ document >
1. HTML代码 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>备忘录</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <h2>备忘录</h2> <form> <label>标题:</label> <input type="text" id="title"><br><br> <label>内容:</label> <textarea id="content"></textarea><br><br> <input type="button" value="添加备忘录" onclick="addMemo()"> </form> <hr> <h3>备忘录列表</h3> <ul id="memoList"> </ul> <script src="memo.js"></script> </body> </html> ``` 2. JavaScript代码 ```javascript // 添加备忘录 function addMemo() { var title = $("#title").val(); var content = $("#content").val(); $.ajax({ type: "POST", url: "add_memo.php", // 处理新增备忘录的PHP文件 data: {title: title, content: content}, dataType: "json", success: function(data){ if(data.status == "success"){ alert("添加成功!"); $("#title").val(""); $("#content").val(""); getMemoList(); // 添加成功后,重新获取备忘录列表 }else{ alert("添加失败!"); } } }); } // 获取备忘录列表 function getMemoList() { $.ajax({ type: "GET", url: "memo_list.php", // 处理获取备忘录列表的PHP文件 dataType: "json", success: function(data){ if(data.status == "success"){ var memoListHtml = ""; for(var i=0; i<data.memoList.length; i++){ memoListHtml += "<li><h4>"+data.memoList[i].title+"</h4><p>"+data.memoList[i].content+"</p></li>"; } $("#memoList").html(memoListHtml); }else{ alert("获取备忘录列表失败!"); } } }); } $(function(){ getMemoList(); // 页面加载时获取备忘录列表 }); ``` 3. PHP代码(add_memo.php) ```php <?php header('Content-Type: application/json; charset=utf-8'); // 获取POST数据 $title = $_POST["title"]; $content = $_POST["content"]; // 连接数据库 $servername = "localhost"; $username = "root"; $password = "root"; $dbname = "memo"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // SQL语句 $sql = "INSERT INTO memo (title, content) VALUES ('$title', '$content')"; if ($conn->query($sql) === TRUE) { $result = array("status"=>"success"); } else { $result = array("status"=>"fail"); } $conn->close(); echo json_encode($result); ?> ``` 4. PHP代码(memo_list.php) ```php <?php header('Content-Type: application/json; charset=utf-8'); // 连接数据库 $servername = "localhost"; $username = "root"; $password = "root"; $dbname = "memo"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // SQL语句 $sql = "SELECT * FROM memo ORDER BY id DESC"; $result = $conn->query($sql); if ($result->num_rows > 0) { $memoList = array(); while($row = $result->fetch_assoc()) { $memo = array( "title"=>$row["title"], "content"=>$row["content"] ); array_push($memoList, $memo); } $result = array("status"=>"success", "memoList"=>$memoList); } else { $result = array("status"=>"fail"); } $conn->close(); echo json_encode($result); ?> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值