rails应用ajax之二:使用rails自身支持

简介:

    考虑另一种情况:

1. 页面上半部分显示当前的所有用户,页面下半部分是输入新用户的界面;

2. 每当输入新用户时,页面上半部分会动态更新新加用户的内容;

    我们还是用ajax实现,不过这次用rails内部对ajax的支持,其中在服务器端返回一个js脚本,然后在客户端执行。

    新建user数据结构 rails g scaffold User name:string age:integer

    接着应用数据库视图 rake db:migrate

    修改index.html.erb的内容:

<h1>Listing Users</h1>

<ul id="users">
	<%= render @users%>
</ul>
<br />
<%= form_for(@user,remote:true) do |f|%>
	<%= f.label :name %><br \>
	<%= f.text_field :name %>
	<%= f.label :age %><br \>
	<%= f.text_field :age%>
	<%= f.submit %>
<% end %>

同时新建一个局部模板_users.html.erb:

<li><%= user.name%></li>
<li><%= user.age%></li>

接下来增加服务器端对js的支持,很简单:

  def index
    @users = User.all
    @user = User.new
    #puts "******* #{render @user} **********"
  end
  
  # POST /users
  # POST /users.json
  def create
    @user = User.new(user_params)

    respond_to do |format|
      if @user.save
        format.html { redirect_to @user, notice: 'User was successfully created.' }
        format.js {} #增加这一句
        format.json { render :show, status: :created, location: @user }
      else
        format.html { render :new }
        format.json { render json: @user.errors, status: :unprocessable_entity }
      end
    end
  end

别忘了还要写服务器端的js脚本哦。在view下的users目录中新建一个create.js.erb文件:

$("<%= escape_javascript(render @user)%>").appendTo("#users");
<!--$("#users").append("<p>love</p>");-->

基本完成鸟。整个流程大体如下:

首先用户访问users/index页面,当输入name和age点击提交后会进入create Action,其中的format.js一句提供了ajax支持,它会在浏览器端执行create.js.erb的内容:把新建用户信息异步动态插入页面上半部分。

相关文章
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
213 0
|
6月前
|
机器学习/深度学习 数据采集 人工智能
智能嗅探AJAX触发:机器学习在动态渲染中的创新应用
随着Web技术发展,动态加载数据的网站(如今日头条)对传统爬虫提出新挑战:初始HTML无完整数据、请求路径动态生成且易触发反爬策略。本文以爬取“AI”相关新闻为例,探讨了通过浏览器自动化、抓包分析和静态逆向接口等方法采集数据的局限性,并提出借助机器学习智能识别AJAX触发点的解决方案。通过特征提取与模型训练,爬虫可自动推测数据接口路径并高效采集。代码实现展示了如何模拟AJAX请求获取新闻标题、简介、作者和时间,并分类存储。未来,智能化将成为采集技术的发展趋势。
140 1
智能嗅探AJAX触发:机器学习在动态渲染中的创新应用
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
179 3
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
152 0
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
156 5
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
105 0
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
158 0
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
451 0