JsRender+ajax的使用helloword案例

最新推荐文章于 2022-09-23 16:02:12 发布
最新推荐文章于 2022-09-23 16:02:12 发布
阅读量909 收藏 1
点赞数
分类专栏： javascript HTML JsRender 文章标签： ajax json JsRender
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34787830/article/details/79767791
版权
HTML 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
javascript
4 篇文章 0 订阅
订阅专栏
JsRender
2 篇文章 0 订阅
订阅专栏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <%@ page language="java" pageEncoding="UTF-8"%>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="jquery-3.2.1.js"></script>
<script src="//www.jsviews.com/download/jsviews.js"></script>
<!--<script src="//www.jsviews.com/download/sample-tag-controls/jsviews-jqueryui-widgets.js"></script>-->


<script>
$(document).ready(function() {
$("#tijiao").click(function() {
alert("要执行ajxs")
/*    var fd = new FormData(document.querySelector("form")); */
$.ajax({
type : "POST",
url : 'user/login.do',
/*contentType : "application/json; charset=utf-8", */
contentType : "application/x-www-form-urlencoded",
data : $('#J-normal-form').serialize(),
/*  data: fd,  */
dataType : "json",
success : function(data) {
if (data.status == 0) {
console.log(data.data.birth)
alert(data.data.birth)

/* var myTmpl = $.templates("#testTmpl"); 
var html = myTmpl.render(data);   */ 
// 用json返回的数据填充这个模板
var html = $("#testTmpl").render(data);

将模板使用到具体的位置，#LinkStyle

//不追加

// $("#list1").html(html);  #list1为使用位置的ID

//追加

/* $("#list1").append(html);  */
/* $("#wenwebzhi").value(data.data.birth) */
/* window.location.href = "index.html"; */
}


else
{
/* console.log(jsonObject); */
alert(data.msg);
}
},
error : function() {
alert("提交数据失败");
}
});


});


})
</script>




 </head>


 <body>
      <div>
      <table width="800" border="1">
        <thead>
          <tr>
            <th width="10%">序号</th>
            <th width="30%">姓名</th>
            <th width="80%">家庭成员</th>
          </tr>
        </thead>
        
     <!--   <tbody id="list">
          
        </tbody>-->
        <!--3.定义了模板的位置，到时候模板会填充到这个ID=list1的div里面-->
        <div id="list1"></div>
      </table>
      
      <form id="J-normal-form" method="POST" class="form form--stack">
<div class="validate-info" style="visibility:hidden"></div>


<span class="login-type" data-mtevent="login.mobile.switch">
<a id="J-mobile-link"
href="https://passport.meituan.com/account/unitivelogin?service=www&amp;continue=http%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttp%253A%252F%252Fwww.meituan.com%252Faccount%252Fuserinfo%252F&amp;_nsmobilelogin=true">
手机动态码登录 <i></i>
</a> 账号登录
</span>


<div class="form-field form-field--icon">
<i class="icon icon-user"></i> <input type="text" id="login-email"
class="f-text" name="username" placeholder="手机号/用户名/邮箱" value="">
</div>
<div class="form-field form-field--icon">
<i class="icon icon-password"></i> <input type="password"
id="login-password" class="f-text" name="password"
placeholder="密码">
</div>
<div class="form-field J-form-field-captcha form-field--captcha"
style="display:none">
<input type="text" id="captcha" class="f-text J-captcha-input"
name="captcha" placeholder="验证码" autocomplete="off"> <img
height="36" width="72" class="signup-captcha-img"
id="signup-captcha-img" src="./登录 _ 美团网_files/captcha"> <a
tabindex="-1" class="captcha-refresh inline-link"
href="javascript:void(0)">看不清楚？换一张</a>
</div>
<div class="form-field form-field--auto-login cf">
<a tabindex="-1"
href="https://passport.meituan.com/account/retrievepassword?service=www&amp;continue=http%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttp%253A%252F%252Fwww.meituan.com%252Faccount%252Fuserinfo%252F"
target="_top" class="forget-password">忘记密码？</a> <input
type="checkbox" value="1" name="auto_login" id="autologin"
class="f-check ui-checkbox"> <label class="normal"
for="autologin">7天内自动登录</label>
</div>
<div class="form-field form-field--ops">
<input type="hidden" name="origin" value="account-login">
<input type="hidden" name="fingerprint" class="J-fingerprint"
value="0-3-1-"> <input type="hidden" name="csrf"
value="k4QzSxUf-Cz2mTPNNE8kzfrIZEp-eegMnYek"> <input
data-mtevent="login.normal.submit" id="tijiao"  type="button"
class="btn" name="commit" value="登录">

这是文本 <input type="text" id="wenbenzhi"  value="我是邵海楠"/>
</div>
<p class="signup-guide">
还没有账号？<a
href="https://passport.meituan.com/account/unitivesignup?service=www&amp;continue=http%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttp%253A%252F%252Fwww.meituan.com%252Faccount%252Fuserinfo%252F"
target="_top">免费注册</a>
</p>
</form>
      
    </div>
 </body>
</html>
<!--1、先定义一个模板-->
<script id="testTmpl" type="text/x-jsrender">
<tr>
<td>
<input type="checkbox"  value="asd" style="width: 30px; color: red;" />
</td>
<input type="radio" />
    
    <td>{{:msg}}</td>
   
</tr>
</script>








<!-- 
<script type="text/javascript"  charset="utf-8">
$(function(){
    var dataSrouce = [{
        name: "张三",
        family: [
          "爸爸",
          "妈妈",
          "哥哥"
        ]
      },{
        name: "李四",
        family: [
          "爷爷",
          "奶奶",
          "叔叔"
        ]
      },
      {
        name: "李四",
        family: [
          "爷爷",
          "奶奶",
          "叔叔"
        ]
      }
      
    
    ];


      //几种渲染数据
      // 第一种(直接渲染)
      var html = $("#testTmpl").render(dataSrouce);
      // 第二种(直接templates指定渲染)
      //var html = $.templates("#testTmpl").render(dataSrouce);
      // 第三种(复制渲染)
   /*   $.templates("personTmpl", "#testTmpl"); 
      var html = $.render.personTmpl(dataSrouce);  */
      $("#list1").append(html);
});
</script>
 -->
qq_34787830
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端模板引擎(jQuery模板)jsrender入门
weixin_41571938的博客
07-02 406
1、模板用处 预先定义一些固定格式的HTML标签，勿需依赖DOM和JQuery 2、使用流程 引入JS 定义模板 准备显示JSON数据对象 获取模板，将模板与数据相结合 利用Html输出 3、简单的例子 基本变量需要使用冒号 “:” 作为标识，一般是简单对象的某个属性。比如传入一个简单对象data //定义模板 <script type="text/x-jsrender" id="j-specCard"> <table> <tr> <t
Maven+SpringMVC的HelloWord小例子
11-28
Maven的出现，可以极大地方便了我们对依赖的管理。只要填写好pom.xml这个配置文件，那么Maven会自动为我们下载该jar包及其所依赖的jar包，所以这里我创建一个基于Maven的spring MVC小项目。
render函数内用ajax,调用Ajax在mRender中获取函数Datatable
weixin_35838394的博客
08-05 389
我不相信这是你应该如何处理你的数据。不过，我也在我的mRender函数中使用了一个AJAX数据源，如下所述。$(document).ready(function(e){$('.products').dataTable({"bProcessing": true,"sAjaxSource": window.location.protocol + "//" + window.location.hostn...
jsRender的使用
热门推荐
xue251248603的专栏
01-11 1万+
jquery和jsrender.js,conveters,$.views.tags(),$.views.helpers()，htmll编译，js编译，js渲染, javascript, javascript渲染，前台渲染，前台编译
JQuery jsrender模板渲染重新加载页面，jscss加载无效
jrl0920的博客
08-25 960
@
【JS】JsRender模板插件的使用
weixin_34326558的博客
01-14 164
新公司项目，同事推荐了我JsRender模板插件，用了感觉挺好用的，至少比拼接字符串方便的多，而且支持绑定和函数判断，以及一些其他的高级用法，我用到的有，数据绑定，ifelse判断，和方法绑定等。废话不多说，开始介绍。（并非jsRender学习，只是个人项目总结）先看一段代码：<scripttype="text/x-jsrender"id="letterS...
Maven+SpringMVC的HelloWord最简单入门小例子(包含两页面跳转)
10-27
本教程将带你一步步了解如何使用Maven搭建项目环境，并结合SpringMVC实现一个简单的“Hello World”应用，其中包括两个页面的跳转。 首先，Maven是一个项目管理和综合工具，它帮助开发者管理项目的构建、依赖和文档...
SilverLight+vs2008开发的 HelloWord 实例
12-21
SilverLight+vs2008开发的 HelloWord 实例
Python打印helloword
02-26
Python打印helloword
基于Javascript的React Native Helloword设计源码
最新发布
06-01
本源码是基于Javascript开发的React Native Helloword设计，包含142个文件，其中包括28个.js文件，24个.png文件，以及13个.json文件。此外，还包括8个.plist文件，6个.gradle文件，6个.xml文件，以及6个.properties...
JsRender (js模板引擎)
极客神殿
10-29 2295
最近学习了一下Jsrender模板渲染工具，非常不错，功能比较强大，官网说他是“简单直观 功能强大 可扩展的 快如闪电”确实如此。总结一下！！ jsRender 三个最重要的概念：模板、容器和数据。 最重要的是：view(视图) 是我们定义的模板，上下文是视图所用的对象。 一、基础。 {{:}} 和 {{>}}(或{{html:}})两者都可以输出内容，不过后者是经过html编码的。 {{: pathOrExpr}} (value) 值类型 {{> pathOrExp
dy小姐姐一向好看~今天我们就用python来通通抓下来吧
weixin_62853513的博客
09-23 1566
大家早好、午好、晚好吖~
backnone render ajax,render
weixin_33901995的博客
08-06 371
render描述 (Description)它包含用于呈现构建视图的模板的逻辑。语法 (Syntax)view.render()例子 (Example)View Exampletype = "text/javascript">type = "text/javascript">type = "text/javascript">//'ViewDemo' is a name of the view cl...
Reect Ajax render 传递数据到子Component 获取不到数据
追随大神的脚步
06-15 1901
ajax获取数据一般都写在 componentDidMount 中，而render的调用周期又是在componentDidMount 前面 这导致了ajax还没有进行的时候，render已经完成了，所以在render里面是获取不到ajax的数据的 然后想到了React在更新数据的时候会重新渲染 so 在state中添加了一个状态 loadingData 它看
yii2 ajax 路由,php – Yii2 renderAjax嵌套Listview
weixin_35816805的博客
08-05 420
我试图通过ajax呈现listview,但它给了我以下错误：Exception (Invalid Configuration) 'yii\base\InvalidConfigException' with message ';The "dataProvider" property must be set.控制器：public function actionLoadListviewAjax(){$d...
用C—++写一个helloword的程序
07-08
当然！以下是一个使用C++编写的"Hello World"程序： ```cpp #include int main() { std::cout , World!"; return 0; } ``` 这个程序会在控制台上输出"Hello, World!"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值