SilverStripe 通过 Ajax 提交 HTML 表单
SilverStripe submit HTML form through Ajax
我想通过Ajax将数据从简单的HTML表单传递到控制器,然后处理数据并返回响应。
目前我有以下内容:
HomePage.ss
<form method="POST" class="form-horizontal submit-form" onsubmit="return checkform(this);">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-8">
<input id="name" name="name" type="text" placeholder="insert full Name" class="form-control input-md" required="" />
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="send-btn"></label>
<div class="col-md-8">
<button id="send-btn" name="send-btn" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
JavaScript
$('form.submit-form').submit(function() {
$.ajax({
type: 'POST',
url: 'processForm',
data: $(this).serialize(),
success: function(data) {
alert('data received');
}
});
});
主页.php
class HomePage_Controller extends Page_Controller {
public function events() {
$events = CalendarEvent::get();
return $events;
}
public function processForm() {
if (Director::is_ajax()) {
echo 'ajax received';
} else {
//return $this->httpError(404);
return 'not ajax';
}
}
}
在开发人员工具中,我可以看到我得到了带有 404 未找到错误的 xhr processForm。
如何让这个 Ajax 表单与 SilverStripe 控制器正常工作?
Spider,
我做了类似于下面的事情。这是一个快速而肮脏的演示,尚未经过测试,但它可能会让您走上正确的道路。如果你不熟悉表单在 SilverStripe 中的工作方式,那么 SilverStripe 中的前端表单有一个课程。我个人发现这些课程很有用,并为课程提供了代码:http://www.silverstripe.org/learn/lessons/introduction-to-frontend-forms?ref=hub
页.php
<?php
class Page extends SiteTree
{
}
class Page_Controller extends Content_Controller
{
private static $allowed_actions = array(
'MyForm',
);
public function MyForm()
{
Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.min.js');
Requirements::javascript(THIRDPARTY_DIR . '/jquery-validate/jquery.validate.min.js');
Requirements::javascript('/path/to/your/validation/script.js');
$fields = FieldList::create(
TextField::create('name')
->setTitle('Name')
);
$actions = FieldList::create(
FormAction::create('doSubmit')
->setTitle('Submit')
);
$requiredFields = RequiredFields::create(
'name'
);
$form = Form::create($this, 'MyForm', $fields, $actions, $requiredFields);
return $form;
}
public function doSubmit($data, $form)
{
//process $data or create your new object and simpley $form->saveInto($yourObject); then $yourObject->write()
//then deal with ajax stuff
if ($this->request->isAjax()) {
return $this->customise(array(
'YourTemplateVar' => 'Your Value'
))->renderWith('YourIncludeFile');
} else {
//this would be if it wasn't an ajax request, generally a redirect to success/failure page
}
}
}
您的验证脚本.js
(function ($) {
$(function () {
$('#MyForm_Form').validate({
submitHandler: function (form) {
$.ajax({
type: $(form).attr('method'),
url: $(form).attr('action') + "?isAjax=1",
data: $(form).serialize()
})
.done(function (response) {
$('.content').html(response);
})
.fail(function (xhr) {
alert('Error: ' + xhr.responseText);
});
},
rules: {
name: "required"
}
});
})
})(jQuery);
您需要了解 HTTP 请求路由在 SilverStripe 中的处理方式。
当您发送请求 POST/processForm 时,它被视为页面并由 ModelAsController 管理。这就是为什么您收到 404 错误的原因 - 没有带有 URLSegment = processForm 的站点树记录。
解决方案 1
使用表单对象。它在运行时自动创建所有路由配置。阅读更多https://docs.silverstripe.org/en/3.3/tutorials/forms/https://docs.silverstripe.org/en/3.3/developer_guides/forms/
解决方案 2
当您真正想要转到简单的一种方法请求处理程序时,请使用此方法。注册自定义控制器和路由。
-
您在 mysite/_config/routing.yml 中指定您的路由
--- Name: siteroutes --- Director: rules: processCustomForm: CustomFormController
-
处理您的请求
class CustomFormController extends Controller { public function handleRequest( SS_HTTPRequest $request, DataModel $model ) { if (!$request->isPost()) { // handle invalid request } $name = $request->postVar('name') // process your form } }
- 可以't让我的if语句处理js中的html表单输入
- HTML表单提交时未执行外部函数
- 如何将输入(type=text)从html表单传递到javascript函数
- 多级HTML表单
- 使用html表单中的参数调用JavaScript函数
- javascript弹出窗口没有正确加载html表单
- Javascript/RegEx未验证HTML表单
- JavaScript”;复制“;HTML表单
- 使用Web Html表单创建Javascript数组
- 用PHP发送html表单和文件附件
- 单击鼠标,用MySQL数据填充html表单输入字段
- 从HTML表单发布blob的表单输入类型是什么
- 我的html表单无法验证.请参阅代码片段中的html代码和java脚本
- JavaScript-HTML表单到JSON(空值)和格式
- HTML表单将数据POST到MySQL
- 获取html表单信息并使用ajax将其推送到PHP
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- javascript,HTML表单:单击按钮插入NULL
- 如何在HTML表单中提交我的下拉选择
- 将HTML表单发布到iframe会导致浏览器历史记录出现问题