堆棧內存溢出
  簡體   English   中英

AJax調用控制器以從JSP頁面傳遞數據

[英]AJax call to the controller to pass data from JSP page

 原文  2017-11-03 11:22:21  3   1    javascript/ java/ ajax/ jsp/ spring-mvc

問題描述

我是Spring MVC的初學者，並因錯誤而震驚，我無法使用ajax將數據傳遞給控制器​​。請找到代碼並提出可能的解決方案。 

 <form class="form-horizontal bucket-form" id="myform" method="post" >
            <div class="control-label text-center">
               <p class="required"><em>required fields</em></p></div>

                <div class="form-group">    
                    <label class="col-sm-3 control-label required">First Name</label>
                    <div class="col-sm-6">
                        <input type="text" name="firstname" id="firstname" class="form-control">
                    </div>
                </div>

                <div class="form-group">    
                    <label class="col-sm-3 control-label required">Last Name</label>
                    <div class="col-sm-6">
                        <input type="text" name="lastname" id="lastname" class="form-control">
                    </div>
                </div>

                <div class="form-group">
                     <label class="col-sm-3 control-label required">Gender</label>                      
                         <span style="padding-left:15px">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender"   >
                                Male
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender" >
                                Female
                            </label>
                        </span>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label required">Email id</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" placeholder="" name="mail" id="mail" >
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label required">Profession</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" placeholder="" name="prof" id="prof" >
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label ">Organisation</label>
                    <div class="col-sm-6">
                        <input type="text" name="org" id="org" class="form-control" placeholder="eg:Tech Mahindra">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label ">Experience</label>
                    <div class="col-sm-6">
                        <input type="number" class="form-control" min="0" name="exp" id="exp" placeholder="">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label required">Achievements</label>
                    <div class="col-sm-6">
                        <textarea class="form-control" rows="5" name="ach" id="ach" placeholder=""></textarea>
                    </div>
                </div>

                <div class="form-group">
                     <label class="col-sm-3 control-label required">Event ID</label>
                    <div class="col-sm-3">
                        <input type="number" class="form-control" name="eid" id="eid" >
                    </div> 
                </div>

                <div class="form-group"> 
                    <label class="col-sm-3 control-label">Upload image</label>
                    <div class="col-sm-6">
                        <input type="file" class="form-control" id="forImage" accept="image/*">
                    </div>
                </div>                  

                <div class="form-group">
                    <div class="col-lg-offset-3 col-lg-6">
                        <button class="btn btn-primary" id="speakerSubmit" type="submit">Save</button>
                        <button type="reset" class="btn btn" onClick="myFunction()">Reset</button>
                        <script type="text/javascript">
                            function myFunction() {
                            document.getElementById("myform").reset();
                            }
                        </script>
                    </div>
                </div>

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

     <div class="footer">
           <div class="row">
                <div style="float:left" class="col-md-6"><p 
  style="padding:15px">© 2017.All rights reserved | Powered by <a 
  href="www.techmahindra.com"> TechMahindra </a></div> </p>
                     <div class="social col-md-6 " style="float:right">
                      <a href="facebook.com" class="fa fa-facebook"></a>
                      <a href="twitter.com" class="fa fa-twitter"></a>
                      <a href="plus.google.com" class="fa fa-google"></a>
                      <a href="linkedin.com" class="fa fa-linkedin"></a>
                     </div>                                                                                         
            </div>
    </div>

 </section>
 <script src="js/jquery2.0.3.min.js"></script>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="js/bootstrap.js"></script><!--bootstrap script-->
<script src="js/jquery.dcjqaccordion.2.7.js"></script>
 <script src="js/scripts.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<script>
$( document ).ready(function() {
$("#speakerSubmit").click(function(){
alert("create ready");
alert("data="+window.opener);
var firstname=document.getElementById("firstname").value;
alert("Firstname " +firstname );
var lastname=document.getElementById("lastname").value;
alert("lastname " +lastname);
var mail=document.getElementById("mail").value;
alert("mail " +mail);
var prof=document.getElementById("prof").value;
alert("prof " +prof);
var org=document.getElementById("org").value;
alert("org "+org);
var exp=document.getElementById("exp").value;
alert("exp " +exp);
var ach=document.getElementById("ach").value;
alert("ach "+ach);
var eid=document.getElementById("eid").value;
alert("eid "+eid);
var gender="M"; 
//var ge=document.getElementsByName("optionsRadios").value;                                              //1 n as _
var details={firstname:firstname,lastname:lastname,gender:gender,mail:mail,prof:prof,org:org,exp:exp,ach:ach,eid:eid};
alert(details.FNAME+" "+details.LNAME+" "+details.GENDER+" "+details.SPKR_MAILID+" "+details.PROFESSION+" "+details.ORGN+" "+details.EXP+" "+details.ACHIEVMNTS+" "+details.SPKR_EVNT_ID);
var res=JSON.stringify(details);
alert("mytxt "+res);
//alert(res.FNAME+" "+res.LNAME+" "+res.GENDER+" "+res.SPKR_MAILID+" "+res.PROFESSION+" "+res.ORGN+" "+res.EXP+" "+res.ACHIEVMNTS+" "+res.SPKR_EVNT_ID);
$.ajax({ 

    url: "http://localhost:8080/EMS_APP/spkr",
    type: "POST",
    contentType:"application/json",
    data : res,
    success: function(data, status) {
        if(data){
         //window.open("CreateEvent.jsp","_self");   //using "_self" or "_parent" will open in same window and same tab
        // window.open("CreateEvent.jsp","_self");
            alert("inserted");

        }else{
        //window.open("index.jsp","_self");
            alert("not inserted");
        }
    },
     error: function(e) { 
        console.log("error");
    }  
  });


  });
 });


 </script>

演講者班 

package com.ems.DO;
import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.OneToOne;
import javax.persistence.Table;

 @Entity
 @Table(name="ems_spkr_tbl")
 public class Speaker {

@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name="SPKR_ID",nullable=false)
    private int speakerId;
@Column(name="FNAME")
    private String firstname;
@Column(name="LNAME")
    private String lastname;
@Column(name="GENDER")
    private String gender;
    /*private String DOB;*/
@Column(name="SPKR_MAILID")
    private String mail;
@Column(name="PROFESSION")
    private String prof;
@Column(name="ORGN")
    private String org;
@Column(name="EXP")
    private String exp;
@Column(name="ACHIEVMNTS")
    private String ach;
@Column(name="SPKR_EVNT_ID")
    private int eid;

    public Speaker(){

    }

    public Speaker(int speakerId, String firstname, String lastname, String 
    gender, String mail, String prof,String org, String exp, String ach, int 
    eid) {
        super();
        this.speakerId = speakerId;
        this.firstname= firstname;
        this.lastname = lastname;
        this.gender = gender;
        this.mail = mail;
        this.prof = prof;
        this.org = org;
        this.exp = exp;
        this.ach = ach;
        this.eid = eid;
    }


    /*@Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    @Column(name="SPKR_ID",nullable=false)*/
    public int getSpeakerId() {
        return speakerId;
    }

    public void setSpeakerId(int speakerId) {
        this.speakerId = speakerId;
    }



    public String getFirstname() {
        return firstname;
    }

    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }



    public String getLastname() {
        return lastname;
    }

    public void setLastname(String lastname) {
        this.lastname = lastname;
    }



    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }



    public String getMail() {
        return mail;
    }

    public void setMail(String mail) {
        this.mail = mail;
    }



    public String getProf() {
        return prof;
    }

    public void setProf(String prof) {
        this.prof = prof;
    }



    public String getOrg() {
        return org;
    }

    public void setOrg(String org) {
        this.org = org;
    }



    public String getExp() {
        return exp;
    }

    public void setExp(String exp) {
        this.exp = exp;
    }



    public String getAch() {
        return ach;
    }

    public void setAch(String ach) {
        this.ach = ach;
    }


    public int getEid() {
        return eid;
    }

    public void setEid(int eid) {
        this.eid = eid;
    }
    }

SpeakerController

我嘗試使用@RequestParam（“ att-name”）批注讀取從jsp頁面傳遞的值並在（“ attribute-name”）中使用相同名稱的控制器類，但被錯誤提示，例如400 Status。 

     package com.ems.controller;

  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.stereotype.Repository;
  import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestMethod;
  import org.springframework.web.bind.annotation.RequestParam;
  import org.springframework.web.bind.annotation.ResponseBody;
  import com.ems.DO.Speaker;
   import com.ems.service.SpeakerService;

  @Controller
  public class SpeakerController {

 @Autowired
 SpeakerService speakerService;


@RequestMapping(value="/spkr",method=RequestMethod.POST)    

  public @ResponseBody boolean speakerAdd(@RequestParam("firstname") String 
  FNAME,@RequestParam("lastname") String LNAME,@RequestParam("gender") 
  String GENDER,@RequestParam("mail") String 
  SPKR_MAILID,@RequestParam("prof") String PROFESSION,@RequestParam("org") 
  String ORGN,@RequestParam("exp") String EXP,@RequestParam("ach") String 
  ACHIEVEMENTS,@RequestParam("eid") String eventid) {

    System.out.println("in speakercontrol");
    Speaker s=new Speaker();
    int i=Integer.parseInt(eventid);
    /*s.setfirstname(FNAME);
    s.setlastname(LNAME);
    s.setgender(GENDER);
    s.setspkrmailid(SPKR_MAILID);
    s.setprofession(PROFESSION);
    s.setorgn(ORGN);
    s.setexp(EXP);
    s.setachievements(ACHIEVEMENTS);
    s.setspkrevntid(eventid);*/
    s.setFirstname(FNAME);
    s.setLastname(LNAME);
    s.setGender(GENDER);
    s.setMail(SPKR_MAILID);
    s.setProf(PROFESSION);
    s.setOrg(ORGN); 
    s.setExp(EXP);
    s.setAch(ACHIEVEMENTS);
    s.setSpeakerId(i);
    System.out.println(eventid);
    System.out.println("Ajax");
    System.out.println("----In controller----");
    boolean status=speakerService.add(s);
    return false;
   }
   }

SpeakerserviceImpl 

 package com.ems.service;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Repository;
 import com.ems.DO.Speaker;
 import com.ems.dao.SpeakerDao;

 @Repository
public class SpeakerServiceImpl implements SpeakerService{

@Autowired
SpeakerDao speakerDao;

public SpeakerServiceImpl() {
    super();
    // TODO Auto-generated constructor stub
}

public boolean add(Speaker s) {


    //System.out.println(fname +" "+skill);
    System.out.println("----In service----");
    boolean status=speakerDao.add(s);
    return status;

    }}

SpeakerdaoImpl 

   package com.ems.dao;
   import java.util.List;
   import org.hibernate.Session;
   import org.hibernate.SessionFactory;
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.stereotype.Repository;
   import com.ems.DO.Speaker;

   @Repository
   public class SpeakerDaoImpl implements SpeakerDao{

   @Autowired
   private SessionFactory sessionFactory;


public void setSessionFactory(SessionFactory sessionFactory) {
       this.sessionFactory = sessionFactory;
}

 public boolean add(Speaker s) {
 boolean status=false;
 Session session = sessionFactory.getSessionFactory().openSession();
 session.save(s);
 System.out.println(s.getAch()+" "+s.getMail()+" "+s.getSpeakerId());
 System.out.println("one record inserted");
 return true;
   } 
 }

錯誤結果

客戶端發送的請求在語法上不正確，狀態為400

1 個解決方案

解決方案1
 1  2017-11-03 12:19:32

調節器 

@PostMapping("EMS_APP/spkr")
public ResponseEntity addSpeaker(@RequestBody SpeakerAddRequest request) {
    Speaker speaker = new Speaker();
    speaker.setFirstName(request.getFirstName());
    ...
}

怎么了？

  • @PostMapping是@RequestMapping(method = RequestMethod.POST)縮寫。
    @PostMapping("EMS_APP/spkr")是@RequestMapping(value = "EMS_APP/spkr", method = RequestMethod.POST) 。
    這指定將在其上調用該方法的URL和HTTP方法。

  • @RequestBody用於將POST請求的有效負載映射到POJO。 在這種情況下，POJO是SpeakerAddRequest 。

  • 您濫用@RequestParam 。 @RequestParam用於映射URL中的參數。 例如： 

     // GET request with URL ../EMS_APP/spkr?name=foo @GetMapping("EMS_APP/spkr") public ResponseEntity<Speaker> getSpeakerByName(@RequestParam("name") String speakerName) { // speakerName== "foo" }

數據傳輸對象（DTO） 

public class SpeakerAddRequest {

    @JsonProperty("firstname")
    private String firstName;
    ...

    public String getFirstName() {
        return firstName;
    }
}

怎么了？

POST有效負載到POJO的映射在此處發生。 例如，屬性"firstname": "John"將映射到private String firstName因為屬性鍵與@JsonProperty指定的鍵相同

形成

取代您的Ajax通話 

$.ajax({
    ...
});

同 

$.post("EMS_APP/spkr", $("#myform").serialize());

怎么了？

與其手動映射所有表單元素，不如使用它自動將表單轉換為適當的有效負載，並將其作為POST請求發送到指定的URL。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何通過Ajax調用將動態ceated表行列的數據值從JSP傳遞到Spring控制器 如何將數據從控制器傳遞給Ajax調用AngularJS的指令 數據從 AJAX 調用傳遞到 Controller 但得到 null 值 如何將數據從ajax傳遞到控制器，然后重新加載以查看頁面 從php到jsp頁面的ajax調用 將數據從一個jsp頁面傳遞到另一個jsp頁面 Ajax調用控制器，成功后重定向到另一個頁面，顯示數據從Ajax調用返回 如何使用ajax從jsp調用Java控制器方法 如何在Spring中將值從控制器傳遞到JSP頁面？ 對JSP頁面進行Ajax調用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM