NullPointerException with jQuery and Ajax

Question

This issue has been plaguing me for quite some time now. I write some code like this in my .js file:-

var fname=$("#fname_ship").val();
var lname=$("#lname_ship").val();

I make sure that I'm referring to proper input box IDs. In my $.ajax() method, I put in something like this:-

data: {"Reason":"Insert","Fname":fname, "Lname" :  lname}

This data is passed to a servlet, where I put in something like this:-

fname=request.getParameter("Fname");
lname=request.getParameter("Lname");

However, 'lname' always contains a null. I've checked my input box ID in my jsp, the variable name in my .js and the variable name in my servlet a hundred times, and they all match up. However, this error doesn't seem to go away. An answer to a similar question suggested using 'jQuery' instead of $ but that didn't work either. Any help would be appreciated. (I'm putting larger chunks of the code below for greater clarity).

My .js:-

    var email=$("#email").val();
    var fname=$("#fname_ship").val();
    var lname=$("#lname_ship").val();
    var addr1=$("#address1").val();
    var addr2=$("#address2").val();
    var country=$("#country").val();
    var mob=$("#mobileNo_ship").val();
    var city=$("#city_ship").val(); 

    $.ajax({
        type: 'POST',
        url: "http://localhost:8085/Flopkart/verifyShippingAddress",
        data: {"Reason":"Insert","Email":email ,"Fname":fname, 
         "Lname" :  lname, "Addr1":addr1 ,"Addr2" : 
         addr2,"Country":country,
        "MobileNo":mob, "City":city},

When I pass these values to my servelt, both 'Lname' and 'Addr1' are null.

My servlet:-

 reason=request.getParameter("Reason");
 email=request.getParameter("Email"); 
 fname=request.getParameter("Fname");
 lname=request.getParameter("Lname");           
 addr1=request.getParameter("Addr1"); 
 addr2=request.getParameter("Addr2");          
 mobileNo=request.getParameter("MobileNo");

 country=request.getParameter("Country");           
 city=request.getParameter("City");

 System.out.println(fname);
 System.out.println(lname); //..NullPtrException

A portion of my .jsp:-

<div class="fields">
        <div class="six wide required field">
            <label>First Name</label> <input id="fname_ship" name="Fname"
            type="text" placeholder="First Name">

        </div>

        <div class="six wide required field">
            <label>Last Name</label> <input  id="lname_ship" name="LName" 
            type="text" placeholder="Last Name">
        </div>
 </div>

 <div class="fields">

        <div class="seven wide required field">
            <label>Shipping Address</label> 
            <input type="text" name="Address1" id="address1" 
            placeholder="Street Address">
        </div>

        <div class="six wide field">
            <label>Address 2</label> <input  id="address2" name="Address2" 
            type="text" placeholder="Address 2">
        </div>
        <div class="five wide required field">
            <label>City</label> <input  id="city_ship" name="City" 
            type="text" placeholder="City">
        </div>
   </div>

Could you explain how to go ahead in a little more detail. I'm not familiar with this. And how do I parse the received data at the other end (servlet)? — Daniyal Parveez, Sep 29 '17 at 22:26
You can parse the json string: JSONObject jObj = new JSONObject(request.getParameter(.... — gaetanoM, Sep 29 '17 at 22:30

score -1 · Answer 1 · answered Sep 29 '17 at 22:54

Filling your data before hand, instead of typing json data like that inside the ajax query may solve your issue. Ex;

$(function() {
    $('#sub').on('click', function() {
    var email = $("#email").val();
    var fname = $("#fname_ship").val();
    var lname = $("#lname_ship").val();
    var addr1 = $("#address1").val();
    var addr2 = $("#address2").val();
    var country = $("#country").val();
    var mob = $("#mobileNo_ship").val();
    var city = $("#city_ship").val();

    var json = {};
    json['Reason'] = "Insert";
    json['Email'] = email;
    json['Fname'] = fname;
    json['Lname'] = lname;
    json['Addr1'] = addr1;
    json['Addr2'] = addr2;
    json['Country'] = country;
    json['MobileNo'] = mob;
    json['City'] = city;

    console.log(JSON.stringify(json));

    $.ajax({
      type: "POST",
      url: "someaction.do?action=saveData",
      data: JSON.stringify(json),
      dataType: application/json
    });        
  })
});

Example fiddle: https://jsfiddle.net/vfubaenq/

Nope. The problem is that request parameters are being sent as a one big JSON string instead of as normal request parameters. Hence the servlet can't extract them as request parameters the usual way. — BalusC, Sep 30 '17 at 08:11

NullPointerException with jQuery and Ajax

1 Answers1