重慶分公司
重慶分公司
| 學(xué)號(hào) | 姓名 | 住址 |
|---|
現(xiàn)在沒(méi)有數(shù)據(jù)
本篇使用servlet +.ajax( )的技術(shù)，實(shí)現(xiàn)簡(jiǎn)單的前后臺(tái)的交互問(wèn)題。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比寒亭網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式寒亭網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋寒亭地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
首先來(lái)了解一下AJAX
AJAX是jquery的一個(gè)方法，一種在網(wǎng)頁(yè)上調(diào)用后臺(tái)接口的方式。
示例：$.ajax( { 參數(shù) } ) ;
$.ajax()等同于jQuery.ajax( )
參數(shù)里是一個(gè)JS對(duì)象, 其中的屬性：
type: ' GET' /‘POST'
url: 接口地址
success:服務(wù)器應(yīng)答時(shí)，調(diào)用此function處理(回調(diào)方法)
另外說(shuō)一下Servlet
Servlet，服務(wù)小程序，為客戶端提供自定義服務(wù)的機(jī)制。
瀏覽器(客戶端) —請(qǐng)求—》Tomcat(服務(wù)器)
Tomcat(服務(wù)器) —應(yīng)答—》瀏覽器(客戶端)
//創(chuàng)建一個(gè)學(xué)生pojo 類
/**
* 這是一個(gè)關(guān)于學(xué)生的POJO類
* 暫時(shí)不引入數(shù)據(jù)庫(kù)
* 只是一個(gè)假的數(shù)據(jù)庫(kù)
*/
public class Student
{
public int id;
public String name;
public String adress;
public Student()
{
}
public Student(int id,String name,String adress)
{
this.id = id;
this.name = name;
this.adress = adress;
}
public int getId()
{
return id;
}
public void setId(int id)
{
this.id = id;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public String getAdress()
{
return adress;
}
public void setAdress(String adress)
{
this.adress = adress;
}創(chuàng)建一個(gè)假的學(xué)生類型數(shù)據(jù)庫(kù)并存入數(shù)據(jù)
public class Db
{
//創(chuàng)建一個(gè)本類的全局對(duì)象
public static Db i = new Db();
//使用鏈表寫入數(shù)據(jù)
private ArrayList stu = new ArrayList<>();
private Db()
{
stu.add(new Student(20180001,"老王","北京"));
stu.add(new Student(20180002,"老甄","邢臺(tái)"));
stu.add(new Student(20180003,"老高","邢臺(tái)"));
stu.add(new Student(20180004,"老孟","邯鄲"));
stu.add(new Student(20180005,"老裴","太原"));
stu.add(new Student(20180006,"老李","東北"));
stu.add(new Student(20180007,"老張","武漢"));
stu.add(new Student(20180008,"老苗","重慶"));
stu.add(new Student(20180009,"老郭","北京"));
}
//獲取全部信息
public ArrayList all()
{
return stu;
}
//按照學(xué)號(hào)查詢
public ArrayList byId(int from,int to)
{
ArrayList qStu = new ArrayList<>();
for(int i=0;i 創(chuàng)建一個(gè)servlet
將數(shù)據(jù)返回
/**
*只需要更改doGet方法
*/
@WebServlet("/QueryAll")
public class QueryAll extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList rows = Db.i.all();
//轉(zhuǎn)換成JSON格式
JSONArray result = new JSONArray(rows);
//返回?cái)?shù)據(jù)
response.setCharacterEncoding("UTF-8");
response.setContentType("text/plain");
Writer writer = response.getWriter();
writer.write(result.toString(2));
writer.close();
}
} 下面是前端的代碼 將html+css+js結(jié)合到了一起
學(xué)號(hào) 姓名 住址 現(xiàn)在沒(méi)有數(shù)據(jù)
最后實(shí)現(xiàn)的內(nèi)容
當(dāng)點(diǎn)擊這個(gè)查詢的時(shí)候 ,將學(xué)生信息打印出來(lái)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
