JQuery

1个成员

jquery ajax实例应用使用说明

发表于 2017-01-23 4027 次查看
在jquery中ajax有很多种地,如果有$.ajax,$.get,$.post等等,下面我来举一些这些函数用用法,各位朋友可参考。

经常用到jquery+ajax/" target="_blank">jquery ajax,但有时候会忘记怎么写,下面做个笔记。 jquery ajax例子:

 代码如下 复制代码

//post 方式

$.ajax({

url : 'test.php',

type : 'post',

data : {'act':'addvideo', 'videoname':videoname},//这里使用json对象

success : function(data){

          //code here...

},

fail:function(){

        //code here...

}

});
 

//get 方式

$.get("test.php", { name: "John", time: "2pm" }, function(data){ //code here... });
 

//get 方式2

$.ajax({

url : 'test.php',

data : {'act':'addvideo', 'videoname':videoname},//这里使用json对象

success : function(data){

//code here...

}

});
 

//jquery ajax同步方式

$.ajax({

url : 'test.php',

type : 'post',

async: false,//使用同步的方式

data : {'act':'addvideo', 'videoname':videoname},//这里使用json对象

success : function(data){

//code here...

},

fail:function(){

//code here...

}

});


实例

jQuery Ajax 无刷新表单提交实例

HTML 代码如下,鉴于可移植性,没有写全 HTML 的标记。

 代码如下 复制代码

[html]
<?php
header(‘Content-Type:text/html;charset=utf-8′);
?>

<script type=”text/javascript” src=”http://code.jquery.com/jquery.min.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#subbtn”).click(function() {
var params = $(‘input’).serialize();
var url = “你的服务器端 php”;

$.ajax({
type: “post”,
url: url,
dataType: “json”,
data: params,
success: function(msg){
var tishi = “您提交的姓名为:” + msg.name +
“<br /> 您提交的密码为:” + msg.password;
$(“#tishi”).html(tishi);
$(“#tishi”).css({color: “green”});
}
});
});

});

</script>
<p><label for=”name”>姓名:</label>
<input id=”name” name=”name” type=”text” />
</p>

<p><label for=”password”>密码:</label>
<input id=”password” name=”password” type=”password” />
</p>

<span id=”tishi”></span>
<p><input id=”subbtn” type=”button” value=”ajax 测试” /></p>
[/html]

服务器 PHP 代码如下

[php]
<?php

echo json_encode($_POST);
[/php]

ajax通过json获取数据例子

 代码如下 复制代码


<script type=”text/javascript”>
$(document).ready(function () {
getScatalog(“paidang”, “M06″);

});

function getScatalog(selectid,BaseCode) {
if (BaseCode != “”) {
$.ajax({
url: “ajax/getCatalogByBasecode.aspx”,
data: “code=” + encodeURI(BaseCode), cache: false,
datatype: “html”,
success: function (context) {
fillselect(selectid, context);
}
});
}
else {
return “Error”;
}
}

function fillselect(selectid, context) {
var listitem=new Array();
listitem = eval(context);
for (var i = 0; i < listitem.length; i++) {
$(“#” + selectid).append(“<option value=’” + listitem[i]["code"] + “‘>” + listitem[i]["name"] + “</option>”);  //为Select追加一个Option(下拉项

)
}
}

</script>

html代码:

<select id=”paidang” name=”paidang”>
<option value=”" selected>==请选择==</option>
</select>

Ajax:

新建一个.aspx页面删除.aspx页面里的html代码删除,在.aspx.cs里添加如下代码

 代码如下 复制代码

string rq_basecode=null;
rq_basecode = Request.QueryString["code"];
if (string.IsNullOrWhiteSpace(rq_basecode))
{
Response.Write(“Error”);
Response.End();
}

BLLCataLog bll_info = new BLLCataLog();
List<Scatalog> lt_info = new List<Scatalog>();
lt_info = bll_info.GetCatalog(rq_basecode,”");
//Response.Write(rq_basecode);
if (lt_info.Count > 0)
{
Response.Write(JsonHelper.ToJson(lt_info));
}
else
{
Response.Write(“Null”);
}

BLL层的数据:

public List<M2Model.Scatalog> GetCatalog(string code, string refcode)
{
DALCataLog dalcatalog6 = new M2SharpDAL.DALCataLog();
return dalcatalog6.GetCatalog(code, refcode);
}

发表回复
你还没有登录,请先登录注册