表单异步提交

最新推荐文章于 2021-10-12 21:22:36 发布
最新推荐文章于 2021-10-12 21:22:36 发布
阅读量324 收藏
点赞数
分类专栏： Ajax 


ajax异步提交js
<script type="text/javascript">
	var request;
	function createRequest() {
	  try {
	    request = new XMLHttpRequest();
	  } catch (trymicrosoft) {
	    try {
	      request = new ActiveXObject("Msxml2.XMLHTTP");
	    } catch (othermicrosoft) {
	      try {
	        request = new ActiveXObject("Microsoft.XMLHTTP");
	      } catch (failed) {
	        request = false;
	      }
	    }
	  }
	    if (!request)
   		 alert("Error initializing XMLHttpRequest!");
  	}
        //用以拿到输入框的帐号和密码以及后台Servlet地址
	function toLogin(){
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		var url = "servlet/adminLoginServlet?username="+username+"&password="+password;
		createRequest();
		request.open("post",url,true);
		request.onreadystatechange = processResponse;
		request.send(null);
	}
	
	function MyLogin(){ 
  		document.getElementById("login").style.visibility="visible"; 
	}
	function processResponse(){
	var res=request.responseText;
	     if (request.readyState == 4) { // 判断对象状态
         if (request.status == 200) { // 信息已经成功返回，开始处理信息
             
              //由后台Servlet传过来的信息

              if(res=="登陆成功"){
                  //进入登录成功后的页面
                  window.location.href="../admin/welcome.jsp";
              
              }else{
                //在原登录页面显示登录失败的信息
                 window.alert(res);
                
               }
                                                               
            } else { //页面不正常
            	
                window.alert("您所请求的页面有异常。");
            }
        }
  	}
	</script>

 <body>
    <h2 aling="center">Ajax 异步请求</h2><hr> 
      	账号：<input type="text" name="username" ><br>
    	密码：<input type="password" name="password" ><br>
    <input name="submit" type="submit" class="buttom"
          value="登 录" onClick="toLogin();return false;"/>
    <input name="exit" type="reset" class="buttom" 
          value="重 置" />
  </body>

java


<pre name="code" class="java">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 Login extends HttpServlet {
 
	public void doPost(HttpServletRequest request, 
HttpServletResponse response)
			throws ServletException, IOException {

		String username = request.getParameter("username");
		String password = request.getParameter("password");
			
		response.setContentType("text/xml; charset=utf-8");
		PrintWriter out = response.getWriter();
		if(username==null||password==null){
			out.print("账号和密码不能为空！");
			return;
		}
		if(username.equals("ajax")&&password.equals("java")){ 
			out.print("登陆成功！"); 
			return;
		} else {
			out.print("账号或密码错误！");
			return;
		}
	}

}



 


 

                

        

        

    




    

      

        

            

              
                
                  M4A1CHENG
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
ajax异步提交表单

				
			

			

				

					07-20
				

			

		

		

			
				
ajax提交的jq版本，相当实用

			
		

	



                

              
                



	

		

			

				
					
表单的异步提交

				
			

			

				

					weixin_52253635的博客
				

				

					08-08
					
					347
					
				

			

		

		

			
				
普通流程
$(’#myForm’).serialize()  :  将表单的参数序列化成一个标准的application/x-www-form-urlencoded 格式
<script>
     $.ajax({
        url : "user",
        type: "POST",
         // 将表单的所有加了name属性input的属性对拼接成一个字符串
        data : $('#myForm').serialize(),  
		dataType

			
		

	



                


  
              

                


	

		

			

				
					
异步提交表单

				
			

			

				

					码小余の博客
				

				

					09-04
					
					4014
					
				

			

		

		

			
				
异步提交表单
异步提交表单的步骤
所谓异步提交表单，就是不再使用表单的提交按钮实现表单的提交功能，而是通过Ajax异步交互方式实现表单提交。具体实现步骤如下:

获取表单及所有表单组件对应的数据值。
将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。
通过Ajax异步交互方式提交表单。

var info = 'username='+$('#username').val()+'&password='+$('#password').val();
$.ajax({
    url: "

			
		

	





	

		

			

				
					
使用异步提交表单

				
			

			

				

					qq_35661734的博客
				

				

					09-07
					
					223
					
				

			

		

		

			
				
第一种方式
普通ajax方式提交
$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: GLOBAL_PATH + "/Enterprise/savecompanyphoto",
             data: {username:

			
		

	



		

			
		



	

		

			

				
					
Jquery让form表单异步提交代码实现

				
			

			

				

					10-15
				

			

		

		

			
				
在Web开发中，jQuery是一...总的来说，jQuery的表单异步提交功能极大地提高了Web应用的交互性，使得用户无需等待页面刷新即可完成数据的提交和处理。通过熟练掌握这一技术，开发者可以创建更加流畅、响应式的网页应用。

			
		

	





	

		

			

				
					
jquery下异步提交表单 异步跨域提交表单

				
			

			

				

					10-28
				

			

		

		

			
				
在使用jQuery处理表单提交时，异步提交和跨域提交是常见的需求，本篇文章将详细介绍如何利用jQuery实现这两种表单提交方式。  ### jQuery下异步提交表单  异步提交表单指的是在不刷新页面的情况下，通过JavaScript...

			
		

	





	

		

			

				
					
Jquery实现表单异步提交.zip

				
			

			

				

					06-18
				

			

		

		

			
				
本项目以"Jquery实现表单异步提交"为主题，通过一个名为"ajaxJquerySubmit"的示例，详细展示了如何在Java Web环境中运用jQuery来实现这一功能。  首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理...

			
		

	





	

		

			

				
					
jquery异步提交form表单

				
			

			

				

					04-21
				

			

		

		

			
				
NULL
博文链接：https://chenzheng8975.iteye.com/blog/1922970

			
		

	





	

		

			

				
					
ajaxForm异步提交表单（含图片）

				
			

			

				

					08-13
				

			

		

		

			
				
ajaxForm异步提交表单（含图片）ajaxForm异步提交表单（含图片）ajaxForm异步提交表单（含图片）

			
		

	





	

		

			

				
					
jquery.form.js (异步提交，页面无刷新提交FORM)

				
			

			

				

					03-23
				

			

		

		

			
				
jquery.form.js (异步提交，页面无刷新提交FORM),
1.需要引用jquery
2.引用JS后，

  $("form").ajaxSubmit(function (responseResult) {

  //responseResult 为从后台返回信息});

			
		

	





	

		

			

				
					
JavaScript—异步提交表单的6种方式

				
			

			

				

					litianao的博客
				

				

					09-07
					
					1210
					
				

			

		

		

			
				
在学习异步提交表单之前，先来学习几个JQuery方法和属性。
1、serialize()：序列表格内容为字符串。如下：

queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.title=&queryBean.province=&queryBean.city=&selectID=ad78f509f2bc412

			
		

	





	

		

			

				
					
使用jQuery.form插件，实现完美的表单异步提交

				
			

			

				

					
				

				

					06-30
					
					68
					
				

			

		

		

			
				
传送门：异步编程系列目录……

示例下载：使用jQuery.form插件，实现完美的表单异步提交.rar

抓住6月份的尾巴，今天的主题是
今天我想介绍的是一款jQuery的插件：Jquery.form.js 官网。
 通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。
 现在我们从一个ASP.NET同步表...

			
		

	





	

		

			

				
					
Ajax 异步提交表单

				
			

			

				

					向往的那片海洋
				

				

					11-15
					
					380
					
				

			

		

		

			
				
异步提交表单的步骤
所谓异步提交表单，就是不再使用表单的提交按钮实现表单的提交功能，而是通过 Ajax 异步交互方式实现表单。具体实现步骤如下：

获取表单及所有表单组件对应的数据值
将所有表单组件对应的数据值拼成特定格式的字符串或是 JSON 格式数据
通过 Ajax 异步交互方式提交表单

<body>
    <form action="#">
        <input type="text" id="name">
        <input type=

			
		

	





	

		

			

				
					
ajax异步提交表单。

				
			

			

				

					满天星
				

				

					12-01
					
					400
					
				

			

		

		

			
				
ajax异步提交表单有几种方法。
1，不利用表单，通过拼接字符串data 进行提交数据。此方法如果想上床图片。需要借助HTML5   FileReader 把图片转换成base64字符串通过隐藏域传值。这样有把base64字符串传到后台，base64字符串中的+会在提交的时候被转义。可以吧base64图片字符串进行加密再解密（
encodeURIComponent()
）



2,

			
		

	





	

		

			

				
					
AJAX异步提交FORM表单

				
			

			

				

					chose_DoIt的博客
				

				

					04-02
					
					1126
					
				

			

		

		

			
				
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;login test&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;meta http-equiv="pragma" con

			
		

	





	

		

			

				
					
Form表单实现异步的提交

				
			

			

				

					一名假人的博客
				

				

					08-27
					
					3902
					
				

			

		

		

			
				
Form表单实现异步的提交

问题描述
<form>标签的一般情况下的默认写法是
<!-- 在method写提交方式 action写Servlet-->
<form method="" action="">
</form>

但是这样提交form表单是非异步提交，在servlet不改变url的情况下，相当于重新刷新页面，这样就会导致几个问题：
1.浪...

			
		

	





	

		

			

				
					
异步(ajax)提交表单

				
			

			

				

					weixin_44548893的博客
				

				

					10-12
					
					348
					
				

			

		

		

			
				
6.3.3异步(ajax)提交表单
在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，只能通过ajax获取响应数据
6.3.4代码实现
6.3.5编写RegistUserServlet
@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
protected void doPost(HttpServletR

			
		

	





	

		

			

				
					
ajax异步提交表单数据

					
最新发布

				
			

			

				

					05-02
				

			

		

		

			
				
使用ajax异步提交表单数据可以避免页面刷新，让用户体验更加流畅。以下是一个示例代码：  ```javascript $(document).ready(function() {  // 监听表单提交事件  $('#myForm').on('submit', function(event) {  // ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值