jquery+ajax简单的例子

最新推荐文章于 2024-07-29 20:46:57 发布

xluren

最新推荐文章于 2024-07-29 20:46:57 发布

阅读量1.1w

点赞数 4

分类专栏： op写前端文章标签： jquery ajax js php

本文链接：https://blog.csdn.net/xluren/article/details/17020341

版权

op写前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<meta charset="utf-8" />
<title>ajax test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('button').click(function(){
    	var name = $(this).attr('name');
		$.ajax({
			url:"hello.php",
			type:"POST",
			data:{'search':name},
			beforeSend: function(){
				alert("this is before send");
			},
			success:function(data) 
			{ 
				alert(data+"123");
			}, 
			error: function(){
				alert('error');
			}
            });
		//$('#out').empty().load('test1.php',{ name : $name });
	});
});
</script>
<style type="text/css"></style>
</head>
<body>
<button id="btn-1" name="1">1</button>
<button id="btn-2" name="2">2</button>
<button id="btn-3" name="3">3</button>

<div id="out"></div>
</body>
</html>

hello.php

<?php
    echo "this is php file it will deal the request from js";
?>

点击按钮，然后按钮绑定的jquery事件处理请求，jquery真的很简单的，尤其对于我这种需要写简单页面，但是没有学过js的菜鸟

		$.ajax({
			url:"hello.php",//处理提交的url
			type:"POST",//提交方式
			data:{'search':name},//提交的数据，其实就是search=name
			beforeSend: function(){
				//提交的数据前做一些操作
				alert("this is before send");
			},
			success:function(data) 
			{
				//提交的数据成功后的一些操作，比如这里的data就是来自
				//后端php脚本返回的结果
				alert(data+"123");
			}, 
			error: function(){
				//提交失败，可能原因，超时，或者后台处理脚本不存在
				alert('error');
			}
            });

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
再来一个form的东西

<meta charset="utf-8" />
<title>ajax test</title>
<script type="text/javascript" src="./js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function()
	{
		$(":submit[id=submit_act]").click(function(check)
		{
			var first_name=$(":text[name=fname]").val();
			alert(first_name);
			if(first_name=="")
			{
				alert("error");
				check.preventDefault();
				return false;
			}
			else{
				$.ajax({
            		url:"hello.php",
            		type:"POST",
            		data:{'search':first_name},
            		beforeSend: function(){
                		alert("this is before send");
						check.preventDefault();
						return false;
            		},
            		success:function(data) 
            		{ 
                		alert(data+"123");
						check.preventDefault();
            		}, 
            		error: function(){
                		alert('error');
						check.preventDefault();
           			}
            	});
			}
				
		});
	});
</script>
<style type="text/css"></style>
</head>
<body>
<form name="postform" method="post" action="./hello.php">
First name: <input type="text" name="fname" />
second name: <input type="text" name="sname" />
<input type="submit" name="submit_act" value="submit" id="submit_act">
</form>
<div id="out"></div>
</body>
</html>

新的hello.php

<?php
    if($_POST['search']=="xluren")
        echo "this is php file it will deal the request from js";
    else
        echo "i do not know ur name";
?>

一些自己的注解：

	$(document).ready(function()
	{
		//通过ID获取按钮，然后绑定一个点击事件
		$(":submit[id=submit_act]").click(function(check)
		{
			var first_name=$(":text[name=fname]").val();//获取输入名字
			alert(first_name);
			//提交前的判断，如果为空，那么就阻止提交
			if(first_name=="")
			{
				alert("error");
				check.preventDefault();//阻止表单提交
				return false;
			}
			else{
				$.ajax({
            		url:"hello.php",//处理表单的后台脚本
            		type:"POST",//提交方式
            		data:{'search':first_name},//提交的数据
            		beforeSend: function(){
						//提交前做一些操作
						//我看到一个wordpress的theme主要是用来改变一些UI
                		alert("this is before send");
						//阻止提交并返回false
						check.preventDefault();
						return false;
            		},
            		success:function(data) 
            		{ 
                		alert(data+"123");
						check.preventDefault();
            		}, 
            		error: function(){
                		alert('error');
						check.preventDefault();
           			}
            	});
			}
				
		});
	});