1. La méthode $.get
$.get() utilise la méthode GET pour effectuer des requêtes asynchrones. Sa structure syntaxique est :
$.get( url [, data] [, callback] )
Expliquez les paramètres de cette fonction :
url : type de chaîne, L'adresse de la requête ajax.
data : paramètre facultatif, type d'objet. Les données clé/valeur envoyées au serveur seront ajoutées à l'URL de la requête en tant que QueryString.
callback : paramètre facultatif, type de fonction, cette fonction est automatiquement appelée lorsque ajax revient avec succès.
Enfin, écrivez un exemple de $.get() pour votre référence :
| |
| |
$.get( "submit.aspx",
{ id: '123', name: '青藤园', },
function(data,state){
//这里显示从服务器返回的数据
alert(data);
//这里显示返回的状态
alert(state); })
|
$.get( "submit.aspx", fonction (données, état){ alerte(état })
| ; >
2. $.post()
$.post() utilise la méthode POST pour faire des requêtes asynchrones. Sa structure syntaxique est :
$.post(url,[data],[callback],[ type])
Cette méthode est similaire. à $.get(), sauf qu'il existe un paramètre de type supplémentaire, nous n'introduireons donc ici que le paramètre de type. Pour d'autres informations, veuillez vous référer à $.get() ci-dessus.
type : type est le
type de données
demandé, qui peut être html, xml, json, etc. Si nous définissons ce paramètre sur : json, alors le format renvoyé sera au format json .S'il n'est pas défini, ce sera le même que le format renvoyé par $.get(), qui est une chaîne.
| |
$.post( "submit.aspx",
{ id: '123', name: '青藤园', },
function(data,state){
//这里显示从服务器返回的数据
alert(data);
//这里显示返回的状态
alert(state);
},
"json");
|
Enfin, écrivez un exemple de $.post() pour votre référence :
| |
$.post( "submit.aspx", { id : '123', nom : 'Ivy Garden', }, function(data,state) { alert(state); > 3. $.getJSON()
$.getJSON() est spécialement configuré pour ajax pour obtenir des données json et prend en charge les appels inter-domaines. . Le format de syntaxe est :
getJSON(url,[data],[callback])
url : type de chaîne, adresse de la demande d'envoi
data : OK. Sélectionnez les paramètres, les paramètres clé/valeur à envoyer, identiques à get, post type data
callback : paramètre facultatif, lorsque le chargement est réussiFonction de rappel, identique à get, post type callback
JSON est un format de transmission de données idéal. Il peut être bien intégré à JavaScript ou à d'autres langages hôtes, et peut être utilisé directement par JS. L'utilisation de JSON est structurellement plus raisonnable et plus sûre que l'envoi de données « nues » directement via GET et POST. Quant à la fonction getJSON() de jQuery, il s'agit simplement d'une version simplifiée de la fonction ajax() avec des paramètres JSON définis. Cette fonction peut également être utilisée sur plusieurs domaines et présente certains avantages par rapport à get() et post(). De plus, cette fonction peut permettre au programme d'exécuter la fonction de rappel X en écrivant l'URL de la requête au format "myurl?callback=X".
Astuce : Les données sont finalement envoyées via la méthode get derrière l'URL. Cela détermine que la quantité de données envoyées ne peut pas être trop importante, sinon l'URL sera trop longue et la réception échouera. (la méthode getJSON est impossible de la soumettre par courrier).
4. $.ajax()
$.ajax() est un package ajax courant dans jquery. 🎜> $.ajax(options) où options est un type d'objet, qui spécifie les paramètres spécifiques de cet appel ajax. Ici, je joins les paramètres les plus couramment utilisés sur .
| |
$.ajax({
| |
$.ajax({
url: 'submit.aspx',
datatype: "json",
type: 'post',
success: function (e) {
//成功后回调
alert(e);
},
error: function(e){
//失败后回调
alert(e);
},
beforeSend: function(){
//发送请求前调用，可以放一些"正在加载"之类额话
alert("正在加载");
}})
|
url : 'submit.aspx', type de données : "json", type : 'post', succès : fonction (e) {
//Rappel après succès Post callback <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><script type ="text/javascript" src = "jquery-1.6.4.min.js"></script></head>
<script type = "text/javascript">
$(function(){
$("#button1").click(function(){
//用getJSON方法获取后台传递过来的JSON对象数组 $.getJSON("http://10.65.9.181:8090/jq_test_server/2.jsp",function(data){
//调用each方法进行数组遍历
$.each(data,function(index,item){
//alert(data);
//alert(item.username); 依次打印所有的username
//alert(item);
//打印出遍历的username的最后一个,因为之前的username会被后者覆盖//打印zxy
$("#button1").html(item.username);
});
});
});
$("#button2").click(function(){
//用get方法获取后台传递过来的json字符串,注意是字符串 $.get("http://10.65.9.181:8090/jq_test_server/2.jsp",function(data){
//alert(data);
//将字符串转化为json对象
data = JSON.parse(data);
$("#button2").html(data[1].username);
});
});
$("#button3").click(function(){
//用post方法获取后台传递过来的json字符串,注意是字符串 $.post("http://10.65.9.181:8090/jq_test_server/2.jsp",function(data){
//alert(data);
//将字符串转化为json对象
data = JSON.parse(data);
$("#button3").html(data[1].username);
});
});
$("#button4").click(function(){
//采用ajax方式获取json字符串 $.ajax({
type:"GET",
url:"http://10.65.9.181:8090/jq_test_server/2.jsp",
success:function(data){
//强制转换为json对象
data = JSON.parse(data);
//打印的是对象数组里面的第一个值对应的username
$("#button4").html(data[0].username);
}
});
});
});
</script>
<body>
<a id = "button1" href = "#">getJSON方法</a>
<a id = "button2" href = "#">get方法</a>
<a id = "button3" href = "#">post方法</a>
<a id = "button4" href = "#">ajax方法</a>
</body>
</html>Copier après la connexion beforeSend: function(){ // Appelé avant d'envoyer le demande, vous pouvez mettre du " Chargement " et d'autres mots alert("Loading" }})<%@ page language="java" import="java.util.*,java.sql.*,org.json.*" pageEncoding="utf-8"%> Copier après la connexion | < /table>response.setHeader("Access-Control-Allow-Origin", "*");Copier après la connexion Page de réception frontale :
Notez que le package mobile jquery doit être introduit
<%@ page language="java" import="java.util.*,java.sql.*,org.json.*"
pageEncoding="utf-8"%>
<% response.setHeader("Access-Control-Allow-Origin", "*");//注意这句话控制js访问权限
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<%
String url = "jdbc:mysql://localhost:3306/jquery";
String user = "root";
String pass = "root";
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url, user, pass);
String sql = "select uid,username,imgurl,age from test1";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
// json数组
JSONArray array = new JSONArray();
// 获取列数
ResultSetMetaData metaData = rs.getMetaData();
int columnCount = metaData.getColumnCount();
// 遍历ResultSet中的每条数据
while (rs.next()) {
JSONObject jsonObj = new JSONObject();
// 遍历每一列
for (int i = 1; i <= columnCount; i++) {
String columnName = metaData.getColumnLabel(i);
String value = rs.getString(columnName);
jsonObj.put(columnName, value);
}
array.put(jsonObj);
}
System.out
.println("======================返回的是json对象转化成的字符串==================");
System.out.println(array.toString());
out.print(array.toString());
} catch (Exception e) {
e.printStackTrace();
}
%>Copier après la connexion Attention à introduire le package org.json
L'effet de la phrase ci-dessus est : la valeur de Access-Control-Allow-Origin peut être joker *si c'est *, vous pouvez recevoir des requêtes de n'importe quelle source. A ce moment, toute requête js externe est autorisée Sans cette phrase, il n'y aura aucun résultat. 🎜> Capture d'écran de la partie base de données :
|
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
