jquery --- 阻止表单默认的提交行为,标准化表单的数据

表单如下:

// .html
<form id="topics_new_form" method="post" action="/topics/new"><div class="form-group"><label for="exampleInputEmail1">选择模块</label><selecet class="form-control" name="module"><option value="share">分享</option><option value="question">问答</option><option value="offer">招聘</option><option value="client-T">客户端测试</option></select></div><div class="form-group"><label for="topics_head">标题</label><input type="text" class="form-control" name="head" id="topics_head" placeholder="Head"></div>    <div class="form-group"><label for="topics_content">内容</label><textarea class="form-control" rows="3" name="content"></textarea></div><button type="submit" class="btn btn-default">Submit</button>
</form>

使用jqurery…监听表单的提交事件.

// 若有node可以 npm install --save jquery
// 若没有,去官网下载 或者引入 cdn
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script>$('#topics_new_form").on("submit", function(e) {// 阻止表单 同步 的POST方法e.preventDefault();// 格式化提交的数据var formData = $(this).serialize();console.log(formData);})
</script>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/250907.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javascript --- spa初体验

首先使用express创建一个简单的服务器 创建文件夹 be-project # (确保安装了node,并配置好了环境) 在be-project目录下(命令行执行) npm init -y npm install --save express body-parse npm install --global nodemon// app.js const express require("express");…

vuex复习笔记

npm install vuex --save 进行安装 vuex import Vuex from vuex 新建一个vuex文件夹&#xff08;这个不是必须的&#xff09;&#xff0c;并在文件夹下新建store.js文件&#xff0c;文件中引入我们的vue和vuex。 转载于:https://www.cnblogs.com/jinsuo/p/8508699.html

python学习HTML之CSS(2)

1、边框的属性设置 PS&#xff1a;边框的高度和宽度可以采用百分比&#xff0c;但是高度方向的百分比基本无用&#xff0c;因为基数没定&#xff0c;参考没意义&#xff01;&#xff01; 2、内边距和外边距 3、在右下角添加一个“回顶部”的标签。 <div></div>中的…

06 事件处理函数绑定与事件对象

事件处理函数绑定 DOM事件处理 addEventListener or onclick function(){} 纯小写React元素也采用了类似DOM0标准中的事件属性定义的方法 小驼峰 JSX <button onClick{ this.doSth }></button>直接创建React元素 React.createElement(button,{onClick: { this.…

css -- 两种方法实现流式布局

Bootstrap将屏幕分为4个等级: 1.超小屏幕 (宽度小于768 px), 显示宽度 100%; 2.小屏幕 (宽度在768px ~ 992px), 显示宽度 750px; 3.中等屏幕 (宽度在992px ~ 1200px), 显示宽度 970px; 4.大屏幕 (宽度大于1200px), 显示宽度 1170px. js实现: window.addEventListener("r…

python文件名匹配

待匹配文件&#xff1a;#FY3D_IPMNT_GBAL_L1_20180516_0003_030KM_MS.HDF 干扰文件&#xff1a;#FY3D_IPMNT_GBAL_L1_20180516_0003_030KM_MS_uuu.HDF 1.正则表达式import reif re.findall(FY3D_IPMNT_GBAL_L1_\d_\d_030KM_MS.HDF,fileEvery): fileList.append(os.path.join(in…

【XSY1594】棋盘控制 概率DP

题目描述 给你一个\(n\times m\)的棋盘&#xff0c;每次随机在棋盘上放一个国际象棋中的车&#xff0c;不能和以前放的重叠。每个车可以控制当前行和当前列。当所有行和所有列都被控制时结束游戏。问你结束时期望放了多少个车。 注意&#xff1a;结束的条件是所有行和所有列都被…

07、08 条件渲染、列表渲染

条件渲染 React没有像v-if、v-show这样的指令&#xff0c;需要使用JSX表达式组合而成 // 与运算 三目 // 判断表达式一定是false/null/undefined时才不会被渲染&#xff0c;0、空字符串、NaN会显示 // 如果render函数返回null&#xff0c;不会进行任何渲染 ......state {showL…

链表的翻转

public ListNode reverseListNode(ListNode node){ ListNode pre null; ListNode now node;//当前节点 while (now !null){ ListNode after now.next; now.next pre; pre now; now after; } …

面向对象命名空间、组合

一 类命名空间与对象、实例的命名空间 创建一个类就会创建一个类的名称空间&#xff0c;用来存储类中定义的所有名字&#xff0c;这些名字称为类的属性 而类有两种属性&#xff1a;静态属性和动态属性 静态属性就是直接在类中定义的变量动态属性就是定义在类中的方法class Pers…

css --- 使用媒体查询当屏幕宽度小于某个值时,隐藏掉某个类

Bootstrap提供了一个封装好的类: .hidden-xs: 当屏幕宽度<768px时隐藏 .hidden-sm: 当屏幕768px < 宽度<992px时隐藏 .hidden-md: 当屏幕992px< 宽度<1200px时隐藏 .hidden-lg: 当屏幕宽度>1200px时隐藏 下面使用css3的 媒体查询来实现: media screen and…

09 受控组件

含义 受控组件&#xff1a;由state来决定表单内部的数据&#xff0c;由表单的事件处理函数来更改state的方式 class App extends React.Component {// 1. state是表单的唯一数据源state {name: }handleChange (e) > {// 2. 控制表单操作并同步statethis.setState({name:…

剑指Offer--青蛙跳台阶引发的一系列问题

题目描述 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法&#xff08;先后次序不同算不同的结果&#xff09;。解法一&#xff08;效率最高&#xff09;数学归纳法&#xff1a;public class Solution {public int JumpFloo…

css --- 伸缩布局,让图片居中

很明显,想要星星位于文字的正下方. // html <section id"lz_about" class"hidden-xs hidden-sm"><div class title text-center"><h1><strong>关于我</strong></h1><img src"./imgs/star.jpg" cla…

day9-Python学习笔记(二十)数据库备份,修改父类的方法

数据库备份&#xff0c;修改父类的方法 import os,datetimeclass BakDb(object): def __init__(self,ip,username,passwd,port3306,path/tmp/db_bak): self.ip ip self.username username self.passwd passwd self.port port self.path path …

10 非受控组件以及受控与非受控的选择方案

含义 非受控组件&#xff1a;表单数据不受控与state的&#xff08;未绑定value&#xff09;&#xff0c;使用React ref从DOM节点中获取表单数据的组件提示refs弃用 class MyForm extends React.Component {constructor(props) {super(props)}submit (e) > {e.preventDef…

wampserver3.0.6 外网 不能访问

# 开始 今天在服务器上安装了wampserver3.0.6 然后在我的电脑浏览器上面打开服务器ip提示 Forbidden 下面一行小字提示没有权限访问"/"目录 # 解决 打开 httpd-vhost.conf 文件 修改成如下 # Virtual Hosts #<VirtualHost *:80>ServerName localhostServerAlia…

javascript --- 在linux上部署项目

最近对照视频,用bootstrap jquery 写了一个纯前端页面.想把它放在服务器上,供远程使用. 准备服务器和域名 我服务器和域名是在腾讯云上租的,网址: https://cloud.tencent.com/ 注: 域名很便宜,挑个好的哈哈哈… 服务器(阿里云有个学生价…但是我那个学生价的账号找不到了…)…

【openssl】利用openssl完成X509证书和PFX证书之间的互转

利用openssl完成X509证书和PFX证书之间的互转 # OpenSSL的下载与安装&#xff1a; 1、下载地址&#xff1a; 官方网址—— https://www.openssl.org/source/ OpenSSL for Windows —— http://gnuwin32.sourceforge.net/packages/openssl.htm 2、安装&#xff1a;此处已OpenSSL…

11 父子组件数据关系与状态提升

含义 状态提升&#xff1a;两个组件&#xff08;无父子关系&#xff09;共享一个数据并且同步数据变化类组件调用&#xff08;实例化&#xff09;的时候&#xff0c;组件内部的状态是唯一且独立的组件嵌套与调用&#xff0c;和是类组件&#xff08;render&#xff09;还是函数…