博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
重温一遍rails中ajax的操作
阅读量:7010 次
发布时间:2019-06-28

本文共 1599 字,大约阅读时间需要 5 分钟。

hot3.png

rails.js是rails处理ajax的核心代码,它其实就做两件事情:

  1. 在rails.js的代码中,会去寻找页面中的links、forms和inputs,如果这些元素带有data-remote=true,那么就给其绑定新的Ajax提交或者点击事件。
  2. 当点击完成后,Ajax请求发出,然后就触发四个js自定义事件,你可以通过这些事件来处理ajax响应

具体开发的时候,也非常简单(以form_for为例):

  1. 在原本的form_for加上:remote => true,这样就会在生成的html代码上加上data-remote=true。

  2. Ajax不仅需要编写客户端代码,服务器端也要做处理,服务端返回什么类型的数据,这个可以通过在form_for上加上"data-type" => 'json',当然如果不添加,默认是js,示例如下:

    # app/controllers/users_controller.rb# ......def create  @user = User.new(params[:user])  respond_to do |format|    if @user.save      format.html { redirect_to @user, notice: 'User was successfully created.' }      format.js   {}      format.json { render json: @user, status: :created, location: @user }    else      format.html { render action: "new" }      format.json { render json: @user.errors, status: :unprocessable_entity }    end  endend
3. 接下来就有两种方式,第一种,返回html片段或者json,在页面添加自定义事件处理代码,让js完成页面的更新:        ```    $(document).ready ->      $("#new_user").on("ajax:success", (e, data, status, xhr) ->        $("#new_user").append xhr.responseText      ).on "ajax:error", (e, xhr, status, error) ->        $("#new_user").append "

ERROR

"
  1. 第二种,返回的是一段js,客户端加载并执行这段js,这个js是由js.erb文件生成的,在js.erb中我们写上处理页面更新的代码,这种方式和第一种相比,代码更轻松简单:

    $("<%= escape_javascript(render @user) %>").appendTo("#users");
###更详细:http://guides.ruby-china.org/working_with_javascript_in_rails.html  https://www.alfajango.com/blog/rails-3-remote-links-and-forms  https://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery  http://blog.madebydna.com/all/code/2011/12/05/ajax-in-rails-3.html

转载于:https://my.oschina.net/u/855913/blog/651956

你可能感兴趣的文章
我的友情链接
查看>>
uptime详解,最通俗的说明了cpu平均负载
查看>>
docker-compose 学习:通过 Dockerfile 和 build 指令搭建 LNMP
查看>>
关于android服务器推送解决方案的学习
查看>>
我的友情链接
查看>>
归档模式和非归档模式 Oracle 10g学习系列(4)
查看>>
多线程程序,只有黑盒测试是不够的!
查看>>
服务器上安装nodejs
查看>>
Python 自动化运维1-拷贝
查看>>
单独编译apache的rewrite模块--收藏
查看>>
一次利用nginx漏洞的***事件
查看>>
我的友情链接
查看>>
split()方法的用法!
查看>>
配置applicationContext.xml出现的问题
查看>>
无线网络IP地址冲突问题不再棘手
查看>>
我的友情链接
查看>>
域名扫描工具Fierce
查看>>
Zabbix WMI 监控
查看>>
关于for in和for循环的遍历
查看>>
完成端口(CompletionPort)详解 - 手把手教你玩转网络编程系列之三
查看>>