`

用 jQuery 创建 ActiveRecord 对象使用jquery.form.js

阅读更多
用 jQuery 创建 ActiveRecord 对象使用jquery.form.js

部分代码, 原文看http://malsup.com/jquery/form/#getting-started
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:        '#output2',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
 
    // bind to the form's submit event 
    $('#myForm2').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 
 
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    var queryString = $.param(formData); 
 
    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
 
    alert('About to submit: \n\n' + queryString); 
 
    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    return true; 
} 
 
// post-submit callback 
function showResponse(responseText, statusText)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
}


分享到:
评论

相关推荐

    yii2-formwizard:一个Yii2插件,用于使用yii \ widgets \ ActiveForm和\ yii \ db \ ActiveRecord创建步进式表单或表单向导

    一个Yii2插件,用于使用yii\widgets\ActiveForm和\yii\db\ActiveRecord创建步进式表单或表单向导,它使用来创建使用3个内置和3个其他主题的表单界面,此外,您还可以创建自己的表单也有自己的定制主题。 注意:它...

    Ruby Rails 3 Linda

    4. **数据库交互**:Rails采用ActiveRecord模式,它是ORM(对象关系映射)的一部分,允许开发者使用Ruby代码操作数据库。理解ActiveRecord的基本用法,如创建模型,定义属性,以及CRUD(创建、读取、更新、删除)...

    city-picker:适用于Typeform hackathon的应用

    ActiveRecord提供了ORM(对象关系映射)的功能,允许开发者用面向对象的方式来处理数据库记录,简化了数据操作的复杂性。在这个应用中,城市数据可能存储在一个数据库表中,每个城市对应一条记录,包括城市名、所属...

    jfinalShiroEasyui

    例如,创建一个用户管理页面,可以使用Easyui的datagrid展示用户列表,点击编辑按钮弹出一个带有Easyui-form的对话框,提交数据时通过Ajax调用Controller的更新接口,Shiro会在后台执行权限验证。 总结,Jfinal ...

    Rails 3.2:嵌套形式的演示第4部分:切换到目标计算机!

    然后,在视图中,我们可以使用`fields_for`辅助方法创建嵌套的表单字段: ```erb <%= form_for @ship do |f| %> <%= f.label :name %> <%= f.text_field :name %> <%= f.fields_for :pilots do |pilot_form| %>...

    sinatra-mailing-list-boilerplate:SinatraActiveRecord 邮件列表注册表单

    总结,`sinatra-mailing-list-boilerplate`项目提供了一个完整的Sinatra应用示例,展示了如何使用Sinatra、ActiveRecord以及JavaScript来创建一个带有验证功能的邮件列表注册表单。这个项目不仅有助于学习Sinatra...

    easyUI+JFinal绝配哦

    6. **插件扩展**:JFinal丰富的插件生态,如ActiveRecord、UploadFile等,可以方便地扩展功能,如文件上传、权限管理等。 通过这样的组合,开发者可以在短时间内构建出功能完善的Web应用,节省大量开发时间和精力。...

    adding-removing-dynamic-form-fields-rails4

    2. **DOM操作**:在前端,你需要使用JavaScript或jQuery来监听事件(例如点击按钮),然后动态创建新的表单字段或将现有字段移除。这包括`append()`, `remove()`, `clone()`, `insertBefore()`和`insertAfter()`等...

    practical_intro_merb.pdf

    尽管Merb与Rails在应用结构上极为相似,都支持使用ActiveRecord作为数据持久化层,但Merb在以下方面有所不同: 1. 请求处理:Merb基于Rack进行请求处理,提供了更灵活的中间件配置。 2. 插件系统:Merb采用gem为基础...

    tisi-carbide-test:一个问题跟踪器,主要讲授一些Ruby on Rails概念

    通过定义模型类,开发者可以使用面向对象的方式来操作数据库,例如创建、读取、更新和删除(CRUD)记录。 3. Routes:Rails的路由系统负责将HTTP请求映射到控制器的动作上。在`config/routes.rb`文件中定义路由规则...

    Ruby-on-Rails-101:Ruby on Rails 笔记摘自 WDI HKV 和其他来源。 比如,lynda的在线Rails教程

    - **ActiveRecord**:Rails中的ORM(对象关系映射)工具,允许开发者用Ruby对象来操作数据库,简化了数据库交互。 - **Routes**:Rails的路由系统负责将URL映射到相应的控制器和动作,实现URL与应用逻辑的关联。 ##...

    Ruby on Rails实践

    例如,ActiveRecord是Rails中的一个关键组件,它提供了ORM(Object-Relational Mapping)功能,允许开发者用Ruby对象直接操作数据库,无需编写SQL语句。 在Rails中,路由(Routes)是连接URL与控制器动作的桥梁。...

    rail on ruby

    - 可以使用 JavaScript 库如 jQuery 来实现 AJAX 功能,提高用户体验。 - **模板引擎**: - Rails 支持多种模板引擎,如 ERB、Haml 和 Slim。 #### 七、Rails 中的模型 - **基础操作**: - 创建、读取、更新和...

    LetsGoSomewhere:铁轨课程铁路工程的最终项目

    3. **表单处理**:Rails提供强大的表单辅助方法,如form_for、text_field、select等,用于生成HTML表单并绑定到模型对象。 4. **AJAX**:为了提升用户体验,可能会使用AJAX异步加载数据或更新页面部分,例如动态...

    Rails True Dynamic Portal-开源

    对于动态交互,项目可能会使用jQuery或其他现代JavaScript库,如React或Vue.js,以提供更丰富的用户体验。 总之,“Rails True Dynamic Portal”项目展示了Rails在构建动态、可定制的门户系统方面的强大能力。通过...

Global site tag (gtag.js) - Google Analytics