html页面的数据利用js或者Ajax传输到后台java、php

最新推荐文章于 2022-11-17 18:31:35 发布

冬天的一缕阳光

最新推荐文章于 2022-11-17 18:31:35 发布

阅读量1w

点赞数 4

分类专栏：杂文

杂文专栏收录该内容

23 篇文章 0 订阅

订阅专栏

网页制作工程中会经常遇见数据的传输。然而对于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

冬天的一缕阳光

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
html页面的数据利用js或者Ajax传输到后台java、php

网页制作工程中会经常遇见数据的传输。然而对于java或者php等是在服务器执行的程序，当页面加载之后嵌在html的这些代码是最先执行的。所以利用简单的传递数据是有问题的。现在介绍几种不同的传递参数问题。1、利用JS传递这里利用表单的post，在表单里面加一个隐藏表单元素比如：只需要把值传给value就，接下来就简单了。2、主要写一下怎么用Ajax传数据到j
复制链接

扫一扫