jquery 实现简单的Ajax例子

最新推荐文章于 2019-09-17 09:33:43 发布

原创最新推荐文章于 2019-09-17 09:33:43 发布 · 735 阅读

0 ·

CC 4.0 BY-SA版权

jquery 同时被 2 个专栏收录

7 篇文章

订阅专栏

Ajax

1 篇文章

订阅专栏

本文介绍了一种利用Ajax技术进行表单验证的方法。通过一个具体的示例展示了如何使用JavaScript和jQuery来发送异步请求，并从服务器获取XML响应来判断用户名的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//js文件

function valid(){

    var jqueryObj = $("#username");
    var name = jqueryObj.val();

   // $.get("AjaxXmlServer?username="+name,null,callback1);
     $.ajax({
        type: "POST",
        url: "AjaxXmlServer",
        data: "username=" + name,
        async:false,
        success: callback1
    });

}

//回调函数
function callback1(data){

    var jqueryObj = $(data);

    var message = jqueryObj.children();

    var text = message.text();

    var divObj = $("#result");

    divObj.html(text);

}

//jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>表单验证例子</title>

    <script style="javaScript" src="js/jquery.js"></script>
    <script style="javaScript" src="js/jqueryXml.js"></script>

    <style>
        #result{
            color:red;
        }
    </style>
</head>
<body>
验证AJAX功能的表单：
请输入用户名： <br>

用户名： <input type="text" id="username" />
<input type="button" value="验证" onclick="valid()" />

<div id="result">
    <h3></h3>

</div>
<br>
<br>
<h2 style="color:blue;font-size:14px">其他地方都不用动哟。。。 </h2>
</body>
</html>

//servlet 端

package ajaxTest1;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxXmlServer extends HttpServlet {

    protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {

        //要改成XML
          response.setContentType("text/xml;charset=GB2312");

          PrintWriter pw = response.getWriter();

          String name = request.getParameter("username");

        System.out.println("name="+name);

        StringBuilder sb = new StringBuilder();

        sb.append("<message>");

        if(name==null ||name.length()==0){
            sb.append("用户名不能为空！！").append("</message>");
        }

        else{
                if(name.contentEquals("yaogl")){
                  sb.append("yaogl 登录成功").append("</message>");
                }
                else{
                    sb.append("用户名错误：").append("</message>");
               }
        }
        System.out.println(sb.toString());
        pw.println(sb.toString());
    }
    protected void doPost(HttpServletRequest request,HttpServletResponse response)
                                       throws ServletException,IOException {

               doGet(request,response);
    }
}