jquery+ajax简单的例子

作者: 大道路漫漫 | 来源:发表于2016-09-01 13:30 被阅读0次

jquery+ajax简单的例子
简单的例子
学习使用jquery+ajax（01）
jQuery+ajax实现简单的上传图片功能
简单的NIO例子
简单的例子效果
WebService的简单例子
简单的RecyclerView例子
django:简单的例子
protobuf的简单例子

HTML

<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>

PHP

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

点击按钮，然后按钮绑定的jquery事件处理请求

$.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的东西

HTML

<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>

新的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();
                }
            });
        }

    });
});

源码来源：http://blog.csdn.net/xluren/article/details/17020341