Fatal编程技术网
  • javascript/
  • Javascript 类型错误：$.ajax不是一个函数--点击spring boot@controller页面的问题

Javascript 类型错误：$.ajax不是一个函数--点击spring boot@controller页面的问题

javascript jquery html ajax spring-boot

Javascript 类型错误：$.ajax不是一个函数--点击spring boot@controller页面的问题,javascript,jquery,html,ajax,spring-boot,Javascript,Jquery,Html,Ajax,Spring Boot,我的项目基于spring boot、Thymeleaf、mysql、html和Jquery。我的场景是获取动态生成的输入框数据和需要执行的静态输入框数据，并点击@controller。但在Jquery脚本中，ajax有问题，调试时说类型错误：$。ajax不是Jquery的函数。。 ：：场景：： 单击提交按钮时，根据表单ID点击函数 社会团体 它将点击并调用ajxPost（） 这里是完整的脚本 /** * This is for adding input and form sumitting

我的项目基于spring boot、Thymeleaf、mysql、html和Jquery。我的场景是获取动态生成的输入框数据和需要执行的静态输入框数据，并点击@controller。但在Jquery脚本中，ajax有问题，调试时说类型错误：$。ajax不是Jquery的函数。。 ：：场景：： 单击提交按钮时，根据表单ID点击函数

社会团体

它将点击并调用ajxPost（） 这里是完整的脚本

  /**
 * This is for adding input and form sumitting to controller
 * This is used only for adding input field when clicking button
 */

$(document).ready(function() {

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $("#addingInp"); //Fields wrapper
var add_button      = $("#addButton"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true

        $(wrapper).append('<div style="margin-top: 20px" class="form-row">'
                +'<div class"form-group col-md-3">'
                +'<label for="block'+x+'">Block</label>'
                +'<input id="block'+x+'" type="text" name="mytext[]" class="form-control block" placeholder="Enter Name"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="floor'+x+'">No of floors</label>'
                +'<input id="floor'+x+'" type="text" name="mytext[]" class="form-control floor" placeholder="Start (Ex : 1)"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="flats'+x+'">No/Name of flats</label>'
                +'<input id="flats'+x+'" type="text" name="mytext[]" class="form-control flatstart" placeholder="Start (Ex : A or 1)"/>'
                +'<input id="flatsend'+x+'" type="text" name="mytext[]" class="form-control flatend" placeholder="End (Ex : Z or 100)"/>'
                +'</div>'

                    +'<a href="#" class="remove_field col-md-1"> X </a>'
                +'</div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
    //--------------------For Submitting data to controller
var url = window.location;
// SUBMIT FORM
$("#socityreg").submit(function(event) {
    // Prevent the form from submitting via the browser.
    event.preventDefault();
    ajxPost();
});


function ajxPost(){

    var max;
    var blockname=[];
    var floors=[];
    var flatstart=[];
    var flatend=[];

    for(max=1;max<=max_fields;max++)
        {
            blockname[max] = $('#block'+max).val();
            floors[max]=$('#floor'+max).val();
            flatstart[max]=$('#flats'+max).val();
            flatend[max]=$('#flatsend'+max).val();

        }
    var blockListPropSub ={
            blockname,
            floors,
            flatstart,
            flatend
    }

    // PREPARE FORM DATA
    var formData = {
            property_name : $("#propertyname").val(),
            address1 : $("#inputaddress").val(),
            address2 : $("#inputaddress2").val(),
            city:$("#inputcity").val(),
            state:$("#inputstate").val(),
            country:$("#inputcountry").val(),
            zipcode:$("#inputzip").val(),
            blockListPropSub
    }

    // DO POST
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : url+"/savemasterproperty",
        data :JSON.stringify(formData),
        dataType : 'json',
        success : function(result) {
            if(result == "saved"){
                $("#resultid").html("<strong>" +username+ " Registered Successfully!" );
            }else{
                $("#resultid").html("<strong>Error</strong>");
            }

            alert(result.status);
            console.log(result);
        },
        error : function(e) {
            alert("Error!")
            console.log("ERROR: ", e);
        }
    });

    // Reset FormData after Posting
        //resetData();

}

   /* function resetData(){
        property_name : $("").val(),
        address1 : $("").val(),
        address2 : $("").val(),
        city:$("").val(),
        state:$("").val(),
        country:$("").val(),
        zipcode:$("").val(),
        }*/
    });//document.ready ends

/**
*这是为了向控制器添加输入和表单sumitting
*这仅用于在单击按钮时添加输入字段
*/
$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“#addingInp”）；//字段包装器
var add_button=$（“#addButton”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x您似乎正在使用
jquery slim
，其中：

以及jQuery的常规版本，其中包括ajax和
特效模块，我们发布了一个“超薄”版本，不包括这些
总之，它排除了ajax、effects和
不推荐使用的代码


您似乎正在使用
jquery slim
，其中：

以及jQuery的常规版本，其中包括ajax和
特效模块，我们发布了一个“超薄”版本，不包括这些
总之，它排除了ajax、effects和
不推荐使用的代码


感谢老兄，我已经将CDN链接更改为…但仍然产生了另一个错误，它没有击中控制器的数据………POST XHR[HTTP/1.1 404 235ms]错误：对象{readyState:4，getResponseHeader:getResponseHeader（），getAllResponseHeaders:getAllResponseHeaders（），setRequestHeader:setRequestHeader（），overrideMimeType:overrideMimeType（），statusCode:statusCode（），abort:abort（），state:state（），always:always（），catch:catch（），还有10个…}我已经检查了错误传递的URL，可能是如果更正了我的URL问题，问题会得到解决…但您的答案是正确的..大多数错误在我将slim版本更改为完整版本的JQUERY CDN link后得到解决..code.JQUERY.com/JQUERY-3.0.0.js“>在ajax请求期间，错误显示“WARN 10044---[nio-8080-exec-6].w.s.m.s.DefaultHandlerExceptionResolver:未能读取HTTP消息：org.springframework.HTTP.converter.httpMessageNodeTableException:JSON解析错误：无法反序列化java.util.ArrayList的实例，因为它不在START_对象令牌中；嵌套的异常是com.fasterxml.jackson.databind.exc.mismatchdinPutException:无法反序列化j的实例ava.util.ArrayList超出起始\u对象token@VigneshR这似乎是另一个问题（对于
java
）与此问题无关。我建议发布一个带有相关代码示例和标记的新问题。感谢好友，我已将CDN链接更改为…但仍产生了另一个错误，它没有击中控制器的数据………post XHR[HTTP/1.1 404 235ms]错误：对象{readyState:4，getResponseHeader:getResponseHeader（），getAllResponseHeaders:getAllResponseHeaders（），setRequestHeader:setRequestHeader（），OverrideMetype:OverrideMetype（），statusCode:statusCode（），abort:abort（），state:state（），always:always（），catch:catch（），还有10个…}我已经检查了错误传递的URL，可能是如果更正了我的URL问题，问题会得到解决…但您的答案是正确的..大多数错误在我将slim版本更改为完整版本的JQUERY CDN link后得到解决..code.JQUERY.com/JQUERY-3.0.0.js“>在ajax请求期间，错误显示“WARN 10044---[nio-8080-exec-6].w.s.m.s.DefaultHandlerExceptionResolver:未能读取HTTP消息：org.springframework.HTTP.converter.httpMessageNodeTableException:JSON解析错误：无法反序列化java.util.ArrayList的实例，因为它不在START_对象令牌中；嵌套的异常是com.fasterxml.jackson.databind.exc.mismatchdinPutException:无法反序列化j的实例ava.util.ArrayList超出起始\u对象token@VigneshR这似乎是另一个与此问题无关的问题（对于
java
），我建议发布一个新问题，其中包含相关的代码示例和标记。

  /**
 * This is for adding input and form sumitting to controller
 * This is used only for adding input field when clicking button
 */

$(document).ready(function() {

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $("#addingInp"); //Fields wrapper
var add_button      = $("#addButton"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true

        $(wrapper).append('<div style="margin-top: 20px" class="form-row">'
                +'<div class"form-group col-md-3">'
                +'<label for="block'+x+'">Block</label>'
                +'<input id="block'+x+'" type="text" name="mytext[]" class="form-control block" placeholder="Enter Name"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="floor'+x+'">No of floors</label>'
                +'<input id="floor'+x+'" type="text" name="mytext[]" class="form-control floor" placeholder="Start (Ex : 1)"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="flats'+x+'">No/Name of flats</label>'
                +'<input id="flats'+x+'" type="text" name="mytext[]" class="form-control flatstart" placeholder="Start (Ex : A or 1)"/>'
                +'<input id="flatsend'+x+'" type="text" name="mytext[]" class="form-control flatend" placeholder="End (Ex : Z or 100)"/>'
                +'</div>'

                    +'<a href="#" class="remove_field col-md-1"> X </a>'
                +'</div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
    //--------------------For Submitting data to controller
var url = window.location;
// SUBMIT FORM
$("#socityreg").submit(function(event) {
    // Prevent the form from submitting via the browser.
    event.preventDefault();
    ajxPost();
});


function ajxPost(){

    var max;
    var blockname=[];
    var floors=[];
    var flatstart=[];
    var flatend=[];

    for(max=1;max<=max_fields;max++)
        {
            blockname[max] = $('#block'+max).val();
            floors[max]=$('#floor'+max).val();
            flatstart[max]=$('#flats'+max).val();
            flatend[max]=$('#flatsend'+max).val();

        }
    var blockListPropSub ={
            blockname,
            floors,
            flatstart,
            flatend
    }

    // PREPARE FORM DATA
    var formData = {
            property_name : $("#propertyname").val(),
            address1 : $("#inputaddress").val(),
            address2 : $("#inputaddress2").val(),
            city:$("#inputcity").val(),
            state:$("#inputstate").val(),
            country:$("#inputcountry").val(),
            zipcode:$("#inputzip").val(),
            blockListPropSub
    }

    // DO POST
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : url+"/savemasterproperty",
        data :JSON.stringify(formData),
        dataType : 'json',
        success : function(result) {
            if(result == "saved"){
                $("#resultid").html("<strong>" +username+ " Registered Successfully!" );
            }else{
                $("#resultid").html("<strong>Error</strong>");
            }

            alert(result.status);
            console.log(result);
        },
        error : function(e) {
            alert("Error!")
            console.log("ERROR: ", e);
        }
    });

    // Reset FormData after Posting
        //resetData();

}

   /* function resetData(){
        property_name : $("").val(),
        address1 : $("").val(),
        address2 : $("").val(),
        city:$("").val(),
        state:$("").val(),
        country:$("").val(),
        zipcode:$("").val(),
        }*/
    });//document.ready ends



    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Vfraternity Socity Registration</title>
<!-- Bootstrap Library CDN link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

</head>
<body>
<!-- Bootstrap/Jquery CDN library files -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- External JQuery Script -->
<script type="text/javascript" src="../js/AddingInput_PropertySocity.js"></script>

<!-- Panel starts -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Socity Registration</h3>
</div>

<div class="panel-body">
<form action="post" role="form" id="socityreg">
<div id="resultid"></div>

<div style="width:900px" class="container-fluid">
  <div class="form-row" id="TextBoxesGroup">
    <div class="form-group col-md-12">
      <label for="propertyname" class="col-form-label">Property</label>
      <input type="text" class="form-control" id="propertyname" placeholder="Property Name">
    </div>

  <div id="addingInp" style="margin-left: 4px;" class="col-md-12">
    <input type='button' class="form-control col-md-4" value='Add Wings/Blocks' id='addButton'>
    </div>

</div>


  <div class="form-group">
    <label for="inputaddress" class="col-form-label">Address</label>
    <input type="text" class="form-control" id="inputaddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputaddress2" class="col-form-label">Address 2</label>
    <input type="text" class="form-control" id="inputaddress2" placeholder="Apartment, studio, or floor">
  </div>


  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputcity" class="col-form-label">City</label>
      <input id="inputcity" class="form-control places" type="text"/>
    </div>
    <div class="form-group col-md-6">
      <label for="inputstate" class="col-form-label">State</label>
      <input id="inputstate" class="form-control place" type="text" />
    </div>

    <div class="form-group col-md-6">
    <label for="inputcountry" class="col-form-label">Country</label>
    <input id="inputcountry" class="form-control place" name="country"/>
    </div>

    <div class="form-group col-md-6">
      <label for="inputzip" class="col-form-label">Zip</label>
      <input id="inputzip" type="text" class="form-control" >
    </div>
  </div>

  <center>
  <button type="submit" class="btn btn-primary">Sign in</button>
  <input type="reset" class="btn btn-primary btn btn-danger"  value="Reset">
  </center>
  </div>

   </div>
</form>
</div>
</div>

</body>
</html>