ajax简单模板

秒速五厘米 2022-09-23 14:45 180阅读 0赞

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>ajax</title>
       <%--  引用包 要在 上面 head 中 加载顺序问题
              script文件也要卸载 上面 head中
    
    
            --%>
        <script src="../js/jquery-1.11.1.js" type="text/javascript">
        </script>
        <script>
            function onsubmit(){
                var  inf =$('#info').val();
                $.ajax({
                    /*
                    * 逗号只是分隔符作用最后一项不要加逗号
                    * */
                    type : 'post',
                    url : '/aja_f.jsp',       // 这个url是网络地址 http://localhost:8081/jsp/aja_f.jsp  没有域名  /jsp/aja_f.jsp
                    data:'inf='+inf,
                   /**
                    * success 链接访问成功，能正常访问就回执行，
                    * 不管数据是否传输过去
                    * error  是本方法中的 数据不合法 比如data：中的参数不合法
                    * 404也会执行error
                    * */
                    success:function (data) {
                        alert(data)
    
                    },
                    error:function(){
                        alert("cc");
                    }
                });
            }
            /*
            * 这是初始化
            * 这个方法 页面加载的时候直接运行不用调用
            *
            * */
            $(function(){ //这个方法加载页面就运行  出错就不加载下面的了js代码了。  $(function(){})
                $('#TJ').on('click',function () {
                    // import * as $ from "../js/jquery-1.11.1";
                    onsubmit();
                })
                //$("#div").append("<input type='text' value='dd'/>");
            })
        </script>
    </head>
    <body>
    
    <div id="div">
        <input type="text" id="info" placeholder="请输入账号 "/>
        <button type="button" id="TJ">确定</button>
        <script>
            $('#TJ').on('click',function () {
                // import * as $ from "../js/jquery-1.11.1";
                onsubmit();
            })
            //$("#div").append("<input type='text' value='dd'/>");
    
        </script>
        </div>
    </body>
    </html>