在 Play Framework 中使用 ajax 加载模板

Question

我正在尝试使用 ajax 驱动的 html 链接加载模板（html 文件）。所以我在左侧有一个导航栏，每个 html 锚点调用一个 jquery ajax 请求以在右侧 div 中加载一个模板。

页面加载，它是一个表单，但是在尝试验证表单时它失败了。

使用 ajax 加载 html 模板有什么限制吗？如果我通过标准路由定义（http://localhost:9000/signup）加载页面，它会加载并验证表单。

ajax 代码类似于：

    $.ajax({
      url: '/signup',
      type: 'GET',
      dataType: 'html',
      success: function(data){
        $('#signup).html(data);
      }             
    }); 

/signup 所做的只是渲染页面：

    public static signup(){
      render();
    }

html 模板是：

    #{extends 'main.html' /}
    #{set title:'test the validation' /}

    #{jQueryValidate class:models.User.class, key:'user' /}
    <div>
<p>Candidate...</p>

<form method="POST" id="joinForm">
    <p class="field">
        <span class="error">#{error 'user.firstname' /}</span>                     <label>Mobile</label>
        <input type="text" name="user.firstname"
            value="${flash['user.firstname']}" />
    </p>

    <input type="submit" name="create" value="Register" />

并使用以下方式提交表单：

    $('#joinForm').submit(function(e) {     
$.ajax({
 type: "POST",
 url: '@{candidate.index()}',
 beforeSend: doValidation,
 success: function() {
     $('#success').html("created...");
 }
 });
 e.preventDefault(); 
    }); 

doValidation 是表单验证（代码取自 samples-and-tests/validation/Sample 7）

在不得不更改我的设计之前，感谢任何解决此问题的见解

谢谢

Answer 1

我找到了答案！这是一个 jquery 解决方案。

发件人：

$('#joinForm').submit(function(e) 

收件人：

$('#joinForm').live("submit", function(e) 

其余的都一样。

Answer 2

看起来您实际上并没有将表单的数据发送到@{candidate.index()}

因为您的代码块缺少数据：属性

这样试试

    $('#joinForm').submit(function(e) {     
$.ajax({
 type: "POST",
 url: '@{candidate.index()}',
 data: $('#joinForm').serializeArray(),
 beforeSend: doValidation,
 success: function() {
     $('#success').html("created...");
 }
 });
 e.preventDefault(); 
    });