jquery前端js框架

            var name = $("input[name='projectName']").val()
            var mode = $("input[name='mode']").val()
            var stamp = $("input[name='stamp']").val()
            var type = $("input[name='type']").val()
            var creator = $("input[name='creator']").val()

元素获取：选择器

选择器允许您对元素组或单个元素进行操作。

jQuery 选择器

jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中： 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");

示例

<div class="box-body">

            <div class="form-group">
                <label>项目名称</label>
                <input class="form-control" name="projectName">
            </div>
            <div class="form-group">
                <label>mode</label>
                <input name="mode" class="form-control" placeholder="public, private">
            </div>
            <div class="form-group">
                <label>标签</label>
                <input name="stamp" class="form-control" placeholder="business">
            </div>
            <div class="form-group">
                <label>项目类型</label>
                <input name="type" class="form-control" placeholder="A,B">
            </div>
            <div class="form-group">
                <label>创建人(工号)</label>
                <input name="creator" class="form-control" placeholder="110138">
            </div>

            <div class="btn btn-primary" id="btn-new-project">保存</div>

</div>

<script type="text/javascript">
    $(function () {

        $("#btn-new-project").on('click', function () {

            var name = $("input[name='projectName']").val()
            var mode = $("input[name='mode']").val()
            var stamp = $("input[name='stamp']").val()
            var type = $("input[name='type']").val()
            var creator = $("input[name='creator']").val()

            $.post('SworkProjectNewOne', {
                name: name,
                mode: mode,
                stamp: stamp,
                type: type,
                creator: creator

            }, function (res) {
                if (res) {
                    alert("创建成功:" + JSON.stringify(res))
                    location.href = "SworkProject"
                } else {
                    alert("创建失败:" + JSON.stringify(res))
                }

            })

        })

    })
</script>

参考

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

前后端交互ajax示例

html代码

 <form id="form" class="form-horizontal" role="form" >
            <div class="form-group" style="padding:20px;"><label class="col-sm-2 ">项目管理 > <a href="#">新建需求</a></label></div>
            <div style="background:#ffffff;border-style:solid; border-width:1px; border-color:#cccccc;margin:20px;padding:40px;height:100%;">
                <div class="form-group" >
                    <label for="projectname" class="col-sm-2 control-label">需求名称<font color="red">*</font></label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="projectname" name="name"
                               placeholder="请输入需求名称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">产品线<font color="red">*</font></label>
                    <div class="col-sm-8">
                        <select class="form-control" name="productId">
                            <option>---请选择---</option>
                            #foreach ($p in $products)
                                <option value="$p.id">$p.name</option>
                            #end
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">部门<font color="red">*</font></label>
                    <div class="col-sm-8">
                        <select class="form-control" name="deptartmentId">
                            <option>---请选择---</option>
                            #foreach ($dm in $departments)
                                <option value="$dm.id">$dm.name</option>
                            #end
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">需求类型<font color="red">*</font></label>
                    <div class="col-sm-8">
                        <select class="form-control" name="type">
                            <option value="-1">---请选择---</option>
                            #foreach ($pt in $projectTypes)
                                #if($pt.id != 500)
                                    <option value="$pt.id">$pt.typeDetail</option>
                                #end
                            #end
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">需求状态<font color="red">*</font></label>
                    <div class="col-sm-8">
                        <select class="form-control" name="status">
                            <option>---请选择---</option>
                            #foreach ($psl in $projectStatuses)
                                <option value="$psl.id">$psl.statusDetail</option>
                            #end
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="projecttarget" class="col-sm-2 control-label">需求目标<font color="red">*</font></label>
                    <div class="col-sm-8">
                        <textarea class="form-control" id="projecttarget" name="goal" rows="3"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="finishdate" class="col-sm-2 control-label">计划完成时间</label>
                    <div class="col-sm-8">
                        <input type="date" class="form-control" id="finishdate" name="goalExpectDate">
                    </div>
                </div>
                <div class="form-group">
                    <label for="department" class="col-sm-2 control-label">跟进人</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="department" name="sponsorWorkno"
                               placeholder="请输入跟进人">
                    </div>
                </div>
                <div class="form-group">
                    <label for="mark" class="col-sm-2 control-label">备注</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="mark" name="mark"
                               placeholder="请输入备注">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-5">
                        <button id="submit" type="button" class="btn btn-primary">提交</button>
                        <button id="cancel" type="button" class="btn btn-danger">取消</button>
                    </div>
                </div>
        </form>

jquery ajax post请求

js代码

<script type="text/javascript">
    $(function(){
        $("#submit").bind("click",function(){
            $.ajax({
                type:"POST",url:"saveProject",
                data:$('#form').serialize(),
                dataType:"json",
                success:function(data){
                    if(data != null){
                        location.href="SworkProject";
                    }else{
                        alert("保存失败，请检查下信息！");
                    }
                },
                error:function(error){
                    alert(error);
                }
            });
        });
        $("#cancel").bind("click",function(){
            $("input").val("");
            $("select").val("-1");
            $("textarea").val("");
        });
    })
</script>

后端Controller代码

    @RequestMapping(value = "/saveProject", method = {RequestMethod.POST})
    @ResponseBody
    public Project saveProject(Project project) {
        project = projectService.newOne(project);
        return project;
    }

jQuery ajax中使用serialize()方法提交表单数据

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化.

定义和用法

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

$(selector).serialize()

详细说明

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

使用$.post(), $.get()和$.getJSON()也是一样的：

$.post('your url', $("form").serialize(), function(data) {
        // your code
    }
});

$.get('your url', $("form").serialize(), function(data) {
        // your code
    }
});

$.getJSON('your url', $("form").serialize(), function(data) {
        // your code
    }
});