html頁面的數據利用js或者Ajax傳輸到後臺java、php

網頁製作工程中會經常遇見數據的傳輸。然而對於java或者php等是在服務器執行的程序,當頁面加載之後嵌在html的這些代碼是最先執行的。所以利用簡單的傳遞數據是有問題的。現在介紹幾種不同的傳遞參數問題。

1、利用JS傳遞

            這裏利用表單的post,在表單裏面加一個隱藏表單元素比如: <input type="hidden" style=""   readonly="true" />

只需要把值傳給value就,接下來就簡單了。

2、主要寫一下怎麼用Ajax傳數據到java服務器(對於php也是靈活改動即可)

Ajax可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。Ajax的功能很強大,值得去研究。

   直接代碼解釋吧

html頁面代碼。index.jsp

<%@ page import="java.sql.*"%>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" %>


   
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX calls using Jquery in Servlet</title>

<script type="text/javascript"  src="./js/jquery.min.js"></script>
      <script>
            $(document).ready(function() {                        
                $('#submit').click(function(event) {  
                
                    	var username=$('#user').val();
						$.get('ActionServlet',{user:username},
						
						function(responseText) { 
                        	$('#welcometext').text(responseText);       
                   		 });
                    
                });
            });
        </script>
        
        
</head>

<body>

<form id="form1">
<h1>AJAX Demo using Jquery in JSP and Servlet</h1>
Enter your Name:
<input type="text" id="user"/>
<input type="button" id="submit" value="Ajax Submit"/>
<br/>
<div id="welcometext">
</div>

</form>

</body>



</html>



這是Ajax核心代碼,代碼很簡單,稍微一看就會明白:

<script type="text/javascript"  src="./js/jquery.min.js"></script>
      <script>
            $(document).ready(function() {                        
                $('#submit').click(function(event) {  
                
                    	var username=$('#user').val();
						$.get('ActionServlet',{user:username},
						
						function(responseText) { 
                        	$('#welcometext').text(responseText);       
                   		 });
                    
                });
            });
        </script>

這是主要的代碼片段。代碼很簡單,很容易看懂,是通過get的方法直接傳入到後臺java。

命名:ActionServlet.java

package ajaxdemo;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ActionServlet
 */

public class ActionServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    
    public ActionServlet() {
        // TODO Auto-generated constructor stub
    }


    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
    			throws ServletException, IOException {
    	String name=null;
    	name = "Hello "+request.getParameter("user");
    	if(request.getParameter("user").toString().equals("")){
    		name="Hello User";
    	}
    	
    	
    	response.setContentType("text/plain");  
    	response.setCharacterEncoding("UTF-8"); 
    	response.getWriter().write(name); 
  
    	//System.out.println(name);
    }

  
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
 			throws ServletException, IOException {
    	// TODO Auto-generated method stub
  
    }
    
}

對於jsp需要更改一下web.xml。在web-app標籤裏面加入下面代碼,注意路徑的準確性

<servlet>
    <servlet-name>ActionServlet</servlet-name>
    <servlet-class>ajaxdemo.ActionServlet</servlet-class>
   </servlet>
   <servlet-mapping>
    <servlet-name>ActionServlet</servlet-name>
    <url-pattern>/ActionServlet/*</url-pattern>
   </servlet-mapping>


轉載:(有改動)

http://www.programming-free.com/2012/08/ajax-with-jsp-and-servlet-using-jquery.html


發佈了108 篇原創文章 · 獲贊 13 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章