返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

jquery请求get和post代码

2020-04-13 文章标签: jquery 浏览次数:

我们继续讲解jquery路径请求中,比如使用GET请求,使用POST请求,跟踪状态,载入文件,设置Ajax选项,序列化字符串

jquery操作创建元素

1.jquery GET请求

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").click(function(){	//绑定click事件
            $.get("test2.php",{	//test2.php文件发出请求
                name : "css8",	//发送的请求信息
                pass : 123456,
                age : 1
            },function(data){	//回调函数
                alert(data);	//显示响应信息
        }); 
    });
})
</script>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
	$("input").click(function(){
		$.getJSON("test2.asp",function(data){
				var data  = data;
				var str = "<table border=1 width=100%>";
				str += "<tr>";
				for(var name in data[0]){
					str += "<th>" + name + "</th>";
				}
				str += "</tr>";				
				for(var i=0; i<data.length; i++){
					str += "<tr>";
					for(var name in data[i]){
						str += "<td>" + data[i][name]  + "</td>";
					}
					str += "</tr>";
				}
				str += "<table>";
				$("div").html(str);
		});
	});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
<div></div>
</html>

2.jquery POST请求

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").click(function(){	//绑定click事件
            $.post("test.php",{	//向test.php文件发出请求
                name : "css8",	//发送的请求信息
                pass : 123456,
                age : 1
            },function(data){	//回调函数
                alert(data);	//显示响应信息
        }); 
    });
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
</html>

3.jquery 跟踪状态

<!doctype html>
<html>
<head> 
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").click(function(){
        $.ajax({
            type: "POST",
            url: "test.php",
            data: "name=css8"
        });
        $("div").ajaxStart(function(){
            alert("Ajax请求开始"); 
        })
        $("div").ajaxSend(function(){
            alert("Ajax请求将要发送");
        })
        $("div").ajaxComplete(function(){
            alert("Ajax请求完成");
        })
        $("div").ajaxSuccess(function(){
            alert("Ajax请求成功");
        })
        $("div").ajaxStop(function(){
            alert("Ajax请求结束"); 
        })
        $("div").ajaxError(function(){
            alert("Ajax请求发生错误"); 
        }) 
    });
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
<div></div>
</html>

4.jquery 载入文件

要载入tabel.html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
<table width="100%" border="1">
    <tr>
        <th>name</th>
        <th>pass</th>
        <th>age</th>
    </tr>
    <tr>
        <td>zhu</td>
        <td>123</td>
        <td>1</td>
    </tr>
    <tr>
        <td>zhang</td>
        <td>456</td>
        <td>2</td>
    </tr>
    <tr>
        <td>wang</td>
        <td>789</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>

demo1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").click(function(){
        $("div").load("table.html");
    });
})
</script>
<style type="text/css">
</style>
</head> 
<body>
<input type="button" value="jQuery实现的异步请求" />
<div></div>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").click(function(){
        var str = ($.ajax({		//调用ajax()方法,返回XMLHttpRequest对象
            url :  "table.html",	//载入的URl
            async: false		//禁止异步载入
        })).responseText; 		//获取XMLHttpRequest对象中包含的服务器响应信息
        $("div").html(str); 		//把载入的网页内容附加到div元素内
    });
})
</script>
<style type="text/css">
</style>
</head> 
<body>
<input type="button" value="jQuery实现的异步请求" />
<div></div>
</html>

5.jquery 设置Ajax选项

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title> 
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $.ajaxSetup({				//预设公共选项
        url: "test.php",			//请求的URL
        global: false, 				//禁止触发全局Ajax事件
        type: "POST",			//请求方式
        dataType: "text",			//响应数据的类型
        success : function(data){ 	//响应成功之后的回调函数
            alert(data);
        }
    });
    $("input").eq(0).click(function(){	//为按钮1绑定异步请求
        $.ajax({
            data : "name=zhu"		//发送请求的信息
        });
    });
    $("input").eq(1).click(function(){	//为按钮2绑定异步请求
        $.ajax({
            data : "name=wang"		//发送请求的信息
        });
    });    
    $("input").eq(2).click(function(){	//为按钮3绑定异步请求
        $.ajax({
            data : "name=zhang"	//发送请求的信息
        });
    });    
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="异步请求1" />
<input type="button" value="异步请求2" />
<input type="button" value="异步请求3" />
<div></div>
</html>

6.jquery 设置序列化字符串

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("#submit").click(function(){
        $("p").html($("form").serialize());	//获取和格式化表单的请求字符串信息,并显示出来
        return false;                	//禁止提交表单
    });
})
</script> 
<style type="text/css">
</style>
</head>
<body>
<form action="#" method="post">
    姓名:<input  type="text" name="user" /><br />
    性别:
    <input type="radio" name="sex" value="man" checked="checked" />男
    <input type="radio" name="sex" value="men" />女<br /> 
    年级:
    <select name="grade">
        <option value="1">一</option>
        <option value="2">二</option>
        <option value="3">三</option>
    </select><br />
    科目:
    <select name="kemu" size="6" multiple="multiple">
        <option value="yuwen">语文</option> 
        <option value="shuxue">数学</option>
        <option value="waiyu">外语</option> 
        <option value="wuli">物理</option>
        <option value="huaxue">化学</option> 
        <option value="jisuanji">计算机</option> 
    </select><br />
    兴趣:
    <input type="checkbox" name="love" value="yundong" />运动
    <input type="checkbox" name="love" value="wenyi" />文艺
    <input type="checkbox" name="love" value="yinyue" />音乐
    <input type="checkbox" name="love" value="meishu" />美术
    <input type="checkbox" name="love" value="youxi" />游戏<br />
    <input type="submit" value="提交" id="submit" />  
</form>
<p></p>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("#submit").click(function(){
        //var array = $("form").serializeArray();			//注意,不能够直接在form元素上调用该方法
        var array = $("input, select, :radio").serializeArray();	//在表单域对象上调用serializeArray()方法,
//返回包含传递表单域和值的JSON对象
        var str = "[ <br />"
        for(var i = 0; i<array.length; i++){				//遍历数组格式的JSON对象
            str += "    {"
            for(var name in array[i]){		   			//遍历数组元素对象
                str += name + ":" + array[i][name]  + ","	//组合为JSON格式字符串
            }
            str = str.substring(0,str.length-1);			//清除最后一个字符
            str += "},<br />";
        }
        str = str.substring(0,str.length-7);	 			//清除最后7个字符
        str += "<br />]";
        $("p").html(str);	              			//显示返回的JSON结构字符串
        return false;
    });
})
</script>
<style type="text/css">
</style>
</head> 
<body>
<form action="#" method="post">
    姓名:<input  type="text" name="user" /><br />
    性别:
    <input type="radio" name="sex" value="man" checked="checked" />男
    <input type="radio" name="sex" value="men" />女<br /> 
    年级:
    <select name="grade">
        <option value="1">一</option>
        <option value="2">二</option>
        <option value="3">三</option>
    </select><br />
    科目:
    <select name="kemu" size="6" multiple="multiple">
        <option value="yuwen">语文</option> 
        <option value="shuxue">数学</option>
        <option value="waiyu">外语</option> 
        <option value="wuli">物理</option>
        <option value="huaxue">化学</option> 
        <option value="jisuanji">计算机</option> 
    </select><br />
    兴趣:
    <input type="checkbox" name="love" value="yundong" />运动
    <input type="checkbox" name="love" value="wenyi" />文艺
    <input type="checkbox" name="love" value="yinyue" />音乐
    <input type="checkbox" name="love" value="meishu" />美术
    <input type="checkbox" name="love" value="youxi" />游戏<br />
    <input type="submit" value="提交" id="submit" />  
</form>
<p></p>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。