使用表单向服务端提交请求

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们去创建一个简单的可以发布新文章的表单 .. 先一个 form 标签 .. 上面加上 ui 还有 form .. 表单里有两个字段 .. div.field .. 一个是文本框 .. 先添加一个标签 .. 这个标签是 title 字段的 .. 标签的文字是 标题 .. 在它下面用一个文本框 .. 类型是 text ... name 设置成 title .. 注意这个 name 属性的值是服务端期待的 .. 不能随便填 .. 比如我们的服务器期待 title 这个名字 .. 它表示文章的标签 ..

再添加一个字段 .. div.field .. 用一个 textarea 类型的表单元素 .. 先给它添加一个 label 标签 .. 标签是为 content_raw 这个元素准备的 .. 标签上的文字是 正文 ...

再添加一个 textarea 元素 ... 设置一下 name 属性的值 .. 设置成 content_raw .. 它表示的是文章的内容 ... 这个 content_raw 也是服务端期待的一个名字 ..

最后再添加一个提交按钮 .. button .. 类型是 submit .. 按钮上的文字是 提交 .. 上面添加两个 css 类 .. ui .. 还有 button ..

下面再设置一下这个表单的 api .. 找到页面上的这个表单元素 ... 使用 api 方法 .. 在它的配置对象里可以配置一下这个 api .. action 可以使用 posts .. method 设置成 POST ..

这里再添加一个 serializeForm 属性 ... 把它的值设置成 ture .. 它可以自动根据我们在表单里填写的数据转换成合适的格式 ...然后再发送给服务端 .. 这个功能需要用到一个 jQuery serialize object 插件 .. 在这里我已经链接了这个插件 .. 可以把它放在 semantic.js 的上面 ..

下面我们还是需要用一个 beforeXHR ,修改一下要发送的 xhr 对象 .. 使用 HTTP Basic 的方法通过身份验证 ..

保存一下 .. 先输入要提交的文章的标题 ... 然后是文章的内容 ... 点击 提交 .. 这样会触发表单的 onsubmit 事件 .. 也就会去执行我们设置的 API ... 会根据我们在表单里输入的内容向服务器的 wp-json/posts 这个地址,使用 POST 这个方法提交创建内容的请求 ..

成功以后,我们再打开 WordPress 的文章管理界面 ... 在这里你会看到刚才我们通过表单提交的文章内容 ...

使用表单向服务端提交请求《 Semantic UI 应用接口 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点