使用ajax

Question

我有一个表单，其中包含多个用于各种操作的按钮。我有一个奇怪的问题，点击按钮时jquery onClick不会触发。因此问题。 这可能是一个简单的解决方案，但对不起，我是前端的新手，并没有关于堆栈溢出的问题似乎没有任何帮助。 下面是html：

<form id="create" action="/service/create" method="POST" style="margin: 0 0 0 0;">
<div class="col-sm-7 ">
//Skipping to buttons directly

<button type=submit class="btn btn-default" id="save">Save</button>
<button type="submit" class="btn btn-default" id="preview">Preview</button>
<button type="submit" class="btn btn-default" id="delete">Delete</button>
</div>  
</form>

下面是jquery代码

$(document).ready(function(){
    'use strict';
    $("#create").on('click', '#save', function (e) {

        alert('Save Message');
        e.preventDefault();

            $.ajax({
                url: ADD_ENDPOINT,
                data: {'form': $("create").serialize()},
                type: 'POST'
            });
    });

    $(document).ajaxError(function( event, jqxhr, settings, thrownError) {
        alert("ERROR: "+thrownError);   
    });

    function isErrorOccurred(data){
        if(data.indexOf("ERROR")>=0){
            alert(data);
            return true;
        }
        else{
            return false;
        }
    }
});

你们许多人指出，jquery没有加载到我的页面上，这里是我的html中包含的所有css / js的列表，这看起来很好还是我错过了什么

<link rel="stylesheet" href="../css/global-style.css">
<link rel="stylesheet" href="../css/create.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../bootstrap/css/bootstrap-fileupload.css" />
<link rel="stylesheet" href="../bootstrap/css/datepicker.min.css" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.4.css" type="text/css">
<script src="../jquery/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap-fileupload.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui-1.11.4.js" type="text/javascript"></script>
<script src="../jquery/plugin/jquery.cookie.js" type="text/javascript"></script>
<script src="../js/util.js"></script>
<script src="../js/create.js" type="text/javascript"></script>

Answer 1

正在触发点击，但表单只是接管其正常操作并转到其＆＃34; action＆＃34;中定义的页面。删除＆＃34; type = submit＆＃34;从按钮然后你可以通过jquery处理提交点击按钮使用$（＆＃34; #create＆＃34;）。serialize（）;获取数据。

修改

抓一点！你的代码很好，看到这个小提琴。可能是jquery错误或ADD_ENDPOINT未在任何地方定义

https://jsfiddle.net/ay6494zv/

Integer.valueOf(i)

Answer 2

使用现有的jQuery“click”处理程序，只需{p> type="submit"而不是public class CustomField extends JPanel { /** * */ private static final long serialVersionUID = 1L; JLabel text, portText; JComboBox<String> testCB, option; public CustomField(String text, String opt, String tst) { this.text = new JLabel(text); String[] onOffOpt= {"OFF", "ON"}; this.option = new JComboBox<String>(onOffOpt); this.option.setSelectedItem(opt); this.option.addItemListener(new ItemListener(){ @Override public void itemStateChanged(ItemEvent ie) { portText.setVisible(option.getSelectedIndex() == 1); testCB.setVisible(option.getSelectedIndex() == 1); } }); this.portText = new JLabel("Test:"); String[] testChoices = {"Test", "Test2"}; this.testCB = new JComboBox<String>(testChoices); this.testCB.setSelectedItem(tst); this.setLayout(new FlowLayout()); add(this.text); add(this.option); add(this.portText); add(this.testCB); } } 就可以解决这个问题。

Answer 3

编辑：看起来你终于有了结束标签 - 这个JSFiddle有你的确切代码并且它正常工作：https://jsfiddle.net/zezpeyxk/1/。我想你可能不会将jQuery包含在你的页面上。我会调出Web开发人员控制台并检查是否有任何错误，例如$ is not defined。

唯一不对的是你的代码中有一个小的遗漏错误 - 在你的.on('click')函数中添加一些结束标记，你应该好好去：

$("#create").on('click', '#save', function (e) {
    alert('Save Message');
    e.preventDefault();

    $.ajax({
        url: ADD_ENDPOINT,
        data: {'form': $("create").serialize()},
        type: 'POST'
    });
});

请在此处查看：https://jsfiddle.net/zezpeyxk/