`

ajax提交url 与ajax提交表单的比较

阅读更多
1:ajax自已构造一个url,这种方式传参数要用Data,不能用于表单提交。
   例:
         function createHtml(id){
            $("#reloading").show();
             //edit_bg是个div,提交时显示,这样可以使背景页面不能操作。
            $("#edit_bg").show();
            $.ajax({
            type: "POST",
            url: "pageAction!createHtml.action",
            data: "id="+id,
            success: function(data){
            $("#reloading").hide();
            $("#edit_bg").hide();
            if(data == "true"){
            alert("操作成功。");
              }else{
                    alert("操作失败,请联系管理员!");
                    }
                    }   //操作成功后的操作
                  }); 
                   }

2:ajax提交表单,这对于大数据传输非常有用,如用户注册,信息量非常大,用ajax提交表单,页面比较美观
   但是,对于ajax提交表单,我们还得引入一个js,即:jquery.form.js"

    例:function uploadFile(){
     
      $("#reloading").show();
      $("#edit_bg").show();
       //form1为表单名
      $("#form1").ajaxSubmit({
      type: "POST",
      success: function(data){
      $("#reloading").hide();
      $("#edit_bg").hide();
      if(data.indexOf("true")!=-1){
      alert("操作成功。");
      }else{
      alert(data);
       alert("操作失败,请联系管理员!");
      }
        }   //操作成功后的操作
       }); 
         }

3: 2项中ajax提交表单虽然可以正确操作,但返回的data数据有问题,页面得不到处理结果。如下的代码对ajax提交表单进行了纠正

    function submitForm(){
$('#form1').ajaxSubmit(ajaxOptionsNew); 
       }
   
   var ajaxOptionsNew = { 
                beforeSubmit : fn_check_form, 
                success : showResponse, 
                url : "costAtion!save2.action", 
                error : function(XMLResponse) { 
                    alert(XMLResponse.responseText);  
                    alert(this.type + ' url:' + this.url);
                    alert('操作失败!');
                   // window.location.reload();
                } 
            }; 



function fn_check_form(){
    if($("#Name").val() == ""){
alert("人不能为空");
$("#Name").focus();
return false;
}
       }

  function showResponse(responseText) { 
               try{ 
                //alert(responseText);
                   if(responseText == 'true'){ 
                        alert('操作成功!');
                        window.location.reload();
                   }
                   else if(responseText == 'paramFalse')
                   {
                    alert("必填参数不能为空!")
                   }
                   else if(responseText == 'timeError')
                   {
                     alert("出发时间不能大于报销时间!");
                   }
                   else{ 
                        alert('操作失败!'); 
                     //   window.location.reload();
                    } 
                }catch(e){alert(e.message);} 
        }  

 

分享到:
评论

相关推荐

    ajax提交表单到后台

    4. **运行与测试**:启动Spring应用程序,填写表单并点击提交,前端将通过AJAX发送数据到后端,后端接收到数据后进行处理,并返回相应的响应。 总结来说,利用jQuery的AJAX和Spring MVC,我们可以实现前端表单的无...

    ajax提交url与ajax提交表单的详细比较

    本文将深入探讨两种使用Ajax进行数据交互的方式:通过URL传递参数和通过表单提交。 1. **Ajax提交URL** Ajax提交URL适用于传递较小量的数据,特别是当数据可以简单地以键值对形式表示时。例如,在上述代码段中,`...

    利用ajax提交表单完整流程

    本文将详细介绍如何利用AJAX提交表单的完整流程,以实现更加流畅和用户友好的交互体验。 ### 1. 创建HTML表单 首先,我们需要创建一个HTML表单,它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如: ```...

    ajax提交表单小例子

    本示例主要涉及如何使用AJAX来提交表单,并解决在提交中文数据时可能出现的乱码问题。 首先,我们了解AJAX的基本结构。一个基本的AJAX请求通常包括以下几个步骤: 1. 创建XMLHttpRequest对象:这是AJAX的核心,...

    vue12ajax提交表单

    在Vue.js框架中,提交表单是一个常见的任务,特别是在与后端进行数据交互时,我们通常会使用Ajax技术来实现异步通信。Vue.js结合Ajax(通常指的是jQuery的$.ajax或者现代浏览器的fetch API)可以创建高效且用户体验...

    完成的 Ajax 提交表单

    本示例着重介绍如何使用Ext JS框架中的Ajax组件来实现异步提交表单,以及如何处理success和failure回调。 首先,Ext JS是一个强大的JavaScript库,用于构建富客户端应用程序。它提供了丰富的组件模型和数据绑定机制...

    ajax 无刷新实现表单提交

    ajax无刷新表单提交 2;ajax的运行历程 最简单明了的实例,清晰的帮你弄清上述概念,运行简单,只需解压该包,然后Myeclipse中file - import - general - import existed project to workspace,即可调试运行 调试...

    使用jQuery ajax提交表单代码

    本文将深入探讨如何使用jQuery的ajax方法来提交表单,从而实现异步数据交换,提高用户体验。 首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...

    ajax提交form表单

    在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...

    Ajax使用jQuery提交表单 文件

    在Web开发中,Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不刷新整个页面的情况下,与服务器交换...通过学习和理解这些代码,你可以更深入地掌握Ajax与jQuery结合处理表单提交的方法。

    ajax方式提交表单,全局提交

    `.project`和`.settings`文件通常与开发环境有关,可能是Eclipse或Visual Studio Code等IDE的项目配置文件,它们不直接影响AJAX表单提交的功能,但对开发和调试过程有帮助。 总之,通过使用jQuery和`jquery.form.js...

    ajax提交表单

    在使用jQuery进行AJAX表单提交时,最常用的方法是`$.ajax()`。下面将详细介绍该方法的使用及其选项参数: 1. **$.ajax()方法** ```javascript $.ajax([options]) ``` `$.ajax()`方法用于发送AJAX请求。它接受...

    ajax异步提交表单

    通过上述分析,我们可以看到如何使用jQuery实现简单的AJAX表单提交功能。这种技术可以有效地减少页面刷新次数,提高用户的交互体验。同时,需要注意正确设置请求参数,合理处理请求的成功和失败情况,以及选择合适的...

    JQuery Ajax提交整个表单

    如果表单提交的目标URL与当前页面不在同一个域下,可能存在跨域问题。这时需要服务器端支持CORS(跨源资源共享)或者使用JSONP(JSON with Padding)等技术。 总结,使用jQuery的Ajax功能提交整个表单涉及的关键点...

    AJAX提交表单内容

    以下是一个简单的使用jQuery库实现的AJAX表单提交示例: ```javascript $(document).ready(function() { $('#myForm').submit(function(event) { event.preventDefault(); // 阻止表单默认提交行为 var formData...

    php+ajax表单无刷新验证

    PHP与AJAX(Asynchronous JavaScript and XML)结合的表单验证技术可以实现无刷新验证,即在用户输入时即时检查数据有效性,无需等待完整的表单提交,从而显著提升交互体验。 **一、AJAX基础** AJAX 是一种创建...

    使用AJAX提交Form表单实例演示

    在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种技术,它允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本实例演示将深入探讨如何使用AJAX来提交HTML Form表单,从而提供更...

    ajax实现提交时校验表单方法

    本文实例为大家分享了ajax提交时校验表单的方法,供大家参考,具体内容如下 方法一: 代码示例:  巧妙设计之处:ajax提交的话,不能够进行校验拦截,设置一个flag来判断,很巧妙的设计之处,故收藏! function ...

    ajax表单提交.docx

    首先,我们看到一个名为`ajaxRequest.js`的JavaScript文件,该文件封装了一个功能,用于处理AJAX表单提交。主要函数`submitRequest`接收几个参数,包括需要提交的表单对象`formObj`、提交方式`method`(POST或GET)...

Global site tag (gtag.js) - Google Analytics