ajax请求不同时发送数据库,使用$.get()根据选项的不同从数据库异步请求数据

最新推荐文章于 2022-09-11 07:15:14 发布

烤鸭了没

最新推荐文章于 2022-09-11 07:15:14 发布

阅读量216

点赞数

文章标签： ajax请求不同时发送数据库

Ajax极大地改善了用户体验，对于web2.0来说必不可少，是前端开发人员必不可少的技能。

这个例子是这样的，当从select下拉框选择编程语言时时，根据选项的不同，异步请求不同的函数API描述。这种功能在现在web应用程序中是及其常见的。

我们先来看一下$.get()的结构

$.get(url, [, data], [, callback] [, type])

//url：请求的HTML页的URL地址；

//data(可选),发送至服务器的key/value数据作为QueryString附加到请求URL中；

//callback(可选):载入成功时的回调函数(只有当Response的返回状态是success才调用该方法；

//type(可选):服务器端返回内容格式，包括xml，html，script，json，text和_default

首先创建examplDB数据库，建立language和functions表，SQL如下

CREATE TABLE IF NOT EXISTS language (

id int(3) NOT NULL AUTO_INCREMENT,

languageName varchar(50) NOT NULL,

PRIMARY KEY (id));

CREATE TABLE IF NOT EXISTS functions (

id int(3) NOT NULL AUTO_INCREMENT,

languageId int(11) NOT NULL,

functionName varchar(64) NOT NULL,

summary varchar(128) NOT NULL, //功能概述

example text NOT NULL, //举例

PRIMARY KEY (id));

下面是插入数据的SQL

INSERT INTO language (id, languageName) VALUES

(1, 'PHP'),

(2, 'jQuery');

INSERT INTO functions (id, languageId, functionName, summary, example) VALUES

(1, 1, 'simplexml_load_file', 'Interprets an XML file into an object ', '$xml = simplexml_load_file(''test.xml'');\r\nprint_r($xml);\r\n'),

(2, 1, 'array_push', 'Push one or more elements onto the end of array', '$arrPets = array(''Dog'', ''Cat'', ''Fish'' );\r\narray_push($arrPets, ''Bird'', ''Rat'');\r\n'),

(3, 1, 'ucfirst', 'Make a string''s first character uppercase', '$message = ''have a nice day;\r\n$message = ucfirst($message); // output: Have A Nice Day\r\n'),

(4, 1, 'mail', 'used to send email', '$message = "Example message for mail";\r\nif(mail(''test@test.com'', ''Test Subject'', $message))\r\n{\r\n echo ''Mail sent'';\r\n}\r\nelse\r\n{\r\n echo ''Sending of mail failed'';\r\n}\r\n'),

(5, 2, '$.get', 'Load data from the server using a HTTP GET request.', '$.ajax({\r\n url: url,\r\n data: data,\r\n success: success,\r\n dataType: dataType\r\n});\r\n'),

(6, 2, 'hover', 'hover method accepts 2 functions as parameters which execute alternativelt when mouse enters and leaves an element.', '$(selector).hover(\r\nfunction()\r\n{\r\n//executes on mouseenter\r\n},\r\nfunction()\r\n{\r\n//executes on mouseleave\r\n});'),

(7, 2, 'bind', 'Attach a handler to an event for the elements.', '$(element).bind(''click'', function() \r\n{\r\n alert(''click happened'');\r\n});\r\n'),

(8, 2, 'jQuery.data', 'Store arbitrary data associated with the specified element.', 'jQuery.data(element, key, value);'),

(9, 1, 'add class', 'Adds a class', '(''p'').addClass(''myClass yourClass'');');

都是比较简单的SQL操作，一切准备就绪后就可以编码了。总共有两个脚本文件，一个index.php，一个results.php用于处理请求，先编写index.php

body {font-family:"Trebuchet MS", Verdana, Arial; width:600px;}

div {background-color:#f5f5dc;}

$mysqli = new mysqli('localhost', 'root', 'passwd', 'exampledb');//将passwd改为你的数据库密码

if (mysqli_connect_errno())

{

die('Unable to connect');

}

else

{