ajax與後臺的互動demo

阿新 • • 發佈：2019-01-23

這個demo主要演示ajax與tomcat伺服器的簡單互動操作！

思路：在輸入框中輸入使用者名稱，如使用者名稱為空，則顯示“請輸入使用者名稱”；如輸入的使用者名稱已存在，則顯示“錯號”圖片；不存在相同的使用者名稱，則顯示“對號”圖片

目錄截圖
前端介面（比較簡單）
未輸入
隨機輸入使用者名稱
輸入已存在的使用者名稱
程式碼：
前端介面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>
<head>
<meta charset="UTF-8">
<title>ajax提交</title>
<script Charset="UTF-8" type="text/javascript">
    var xmlhttp;
    function createxmlhttp() {
        //建立XMLHttpRequest並進行相容性除錯
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else 
 {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    function checkuser() {
        //獲得輸入框中的值
        var name = document.getElementById("username").value;
        //對空值的判斷及處理
        if (name == "") {
            document.getElementById("msg").innerHTML = "請輸入使用者名稱！";
            document.getElementById("msg" 
).focus();
            document.getElementById("msg").style.color = "red";
            return false;
        } else {
            //不為空，則不顯示
            document.getElementById("msg").innerHTML = "";
        }
        createxmlhttp();
        //當得到伺服器端的響應時，呼叫handle函式
        xmlhttp.onreadystatechange = handle;
        //拼接url
        var url = "test?username=" + name;
        //"GET" : 第一個屬性表示請求方法("GET" or "POST");
        //url : 上面以拼接完成的url;
        //true : 是否使用非同步
        xmlhttp.open("GET", url, true);
        //傳送！！
        xmlhttp.send();
        function handle() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //得到伺服器端傳過來的圖片地址
                var imagesrc = xmlhttp.responseText;
                //設定圖片的而大小及路徑
                document.getElementById("imgshow").style.width = '15px';
                document.getElementById("imgshow").style.height = '15px';
                document.getElementById("imgshow").src = imagesrc;
            }
        }
    }
</script>
</head>
<body>
    <input type="text" name="username" id="username" onBlur="checkuser()"
        placeholder="輸入使用者名稱">
    <span id="msg"></span>
    <img id="imgshow">
    <br>
    <!-- 這裡使用onBlur事件-->
    <button onBlur="checkuser()">點選</button>
</body>
</html>

伺服器端：

package testservlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class test
 */
@WebServlet("/test")
public class test extends HttpServlet {
    private String teacher = "張三";
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public test() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8"); // 設定編碼
        response.setCharacterEncoding("utf-8"); // 設定編碼
        String name = request.getParameter("username"); // 得到前面的值
        String username = URLDecoder.decode(name, "utf-8"); // 對URL進行編碼
        String url = "";
        if (teacher.equals(username.trim())) {
            url = "image/false.png";
        } else {
            url = "image/true.png";
        }
        // 返回路徑
        response.getWriter().println(url);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    }

}

ajax與後臺互動

$.ajax({ type:"post", url:"action/addc.a", data:{caption:paracaption,remark:pararemark}, dataType:"json", succe

ajax 與後臺互動後返回相應的字串

前臺 $.ajax({ type: "post", url: "<c:url value='/office/word!getPostReportInfo.do' />", data: {items: selectedItems.join('

ajax與後臺的互動demo

這個demo主要演示ajax與tomcat伺服器的簡單互動操作！思路：在輸入框中輸入使用者名稱，如使用者名稱為空，則顯示“請輸入使用者名稱”；如輸入的使用者名稱已存在，則顯示“錯號”圖片；不存

JQuery九種與後臺互動資料的方法（ajax）

@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Index</title> <script src="../../Scripts/jquery

使用原生ajax與後臺資料互動

//html 非完整，只包含必要元素<script>function torun(a) { var id=a.id; var url="test/?typecode="+id; var xmlhttp=new XMLHttpRequest()

.net Ajax與後臺一般處理程式(ashx) 互動

　　　　本文主要實現無動態重新整理查詢後臺資料功能，主要用到ajax+ashx+sqlserver進行互動. 首先需要引用Jquery: <script language="javascript" type="text/javascript" src="../js/jquery.js"> h

用AJAX與後臺進行互動

傳統的form表單提交會導致頁面重新整理，在我們現在這種情況下，不希望頁面被重新整理，這種時候我們都是使用Ajax的方式進行請求的：我們在這裡使用AJAX來進行檔案的批量上傳，以下是檔案上傳程式碼function upload() { $('#fileinput').ajaxSubmit({ url

Ajax()方法如何與後臺互動

Ajax全稱為“Asynchronous JavaScript and XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。Ajax技術是目前在瀏覽器中通過JavaScript指令碼可以使用的所有技術的集合。Ajax以一種嶄新的方式來使

使用Ajax與後臺接口Api交互(以登陸功能為例)

生成 img 形式 http pwd 只需要 package www. class 首先，要做這個功能前，我們必須先查閱後臺接口文檔，了解使用登錄接口時，需要提交哪些參數，並且接口使用返回的數據。這裏我使用了一個返回json格式數據的登錄接口為例，講解怎麽使用Ajax

ajax前臺後臺互動資料的實列

三級聯動：就是平時我們填寫地址所需要填寫的省市縣的下拉框但是不止是指三個下拉框繫結值就行我們需要根據每一個級別去拿到他相對的資料（比如說根據湖南省去拿到長沙市）然後這個值需要從資料庫傳過來因為省市縣的資料太過繁瑣所有我們需要把他簡化實現:aja

前端利用Post方式與後臺互動匯出Excel

最近做了一個功能，將頁面查詢的表格資料匯出到excel表格中，利用NOPI的方法做匯出功能。 1.下載NOPI.dll並引用到專案中。 2.前端頁面的匯出方法： //匯出 function btnExport() { var colArr = []; //

入門之 js中axios實現與後臺互動入口

格式略寫不進去 !!! <script src="js/axios.min.js"></script> <script> window.onload = function(){ // 1.第一種 axios

Http(s)與後臺互動方式

前言 Http(s)是前後端互動的主要方式之一，互動技術主要有:Ajax(XMLHttpRequest)、Fetch、地址跳轉(window.open、location.href)。Http(s)與後臺互動傳遞資料的部分有:請求網址、請求頭、請求主體、響應頭、響應主體請求網址請求網址是通過pathn

react與後臺互動注意點

今天總結一下前端使用react框架，後臺使用mybatis整合springBoot結合使用的要點以及我認為重要的點。注意：我的程式程式碼：JDK是1.8版本，前端用的是es6版本的（與es5區別：定義函式的格式不同等等

前端與後臺互動

互動方式 http請求（問答模式）通過傳統的傳送請求接收相應，一問一答的模式獲得資料，主要負責傳遞引數，接收資料模版，渲染資料，對資料幾乎不操作輪詢（用於獲取最新的資料）對於資料的實時性有要求時，可以採用輪詢的方式，隔幾秒鐘傳送一次請求詢問後臺是否有最新的資料，如果接收到了最新的資料，便更

ES6 fetch函式與後臺互動實現

最近在學習react-native,遇到呼叫後端介面的問題.看了看官方文件,推薦使用es6的fetch來與後端進行互動,在網上找了一些資料.在這裡整理,方便以後查詢. 1.RN官方文件中,可使用XMLHttpRequest var request = new XMLHttpReque

在學習angularJS過程中關於使用$http請求與後臺互動的問題

Html程式碼（注意引入了angularJS）：<!DOCTYPE><html><head><title>$http請求測試</title><meta charset="UTF-8"><script

app與後臺互動以及web與後臺互動的比較

前言：以前的工作一直做的是web方面的測試工作，效能測試也主要是模擬web端向伺服器傳送http請求。對app這一塊的體系和框架了解比較少。由於下一份工作主要是測試app伺服器的效能。就在網上找了一些資料，簡單的搭建一個app的測試環境。同時希望能夠使用

js與後臺互動詳述（入門篇）

很多新手前端在初期學習的時候往往把注意力放在如何編寫頁面，如何編寫效果上，群裡有個朋友問我js是如何與後臺互動的，我簡單的說一下。　　首先需要知道兩個東西，一個是客戶端，一個是伺服器，客戶端其實就是我們在上網時候使用的機器，大部分情況下這個客戶端就是我們的電

iOS與JS互動Demo文件（ObjC版）

參考原文連結： http://mp.weixin.qq.com/s?__biz=MzIzMzA4NjA5Mw==&mid=214063688&idx=1&sn=903258ec2d3ae431b4d9ee55cb59ed89#rd http://ww

ajax與後臺的互動demo

這個demo主要演示ajax與tomcat伺服器的簡單互動操作！

相關推薦