如何使用JavaScript或jQuery在网页上获取和显示AJAX发布JSON响应？

Question

我想在网页的响应上显示JSON响应。 用户登录后，应该在网页上显示用户名。 AJAX post方法返回JSON数据。 请让我知道如何接受json数据以及如何显示它。 在后端，我有以下代码。

这是我的AJAX JSON数据响应

{
"userId": 79,
"userName": "ruchika@gmail.com",
"password": null,
"firstName": "Ruchika",
"lastName": "S",
"phoneNumber": "123456789",
"emailAddress": "ruchika@gmail.com",
"gender": "FEMALE",
"dateOfBirth": null,
"status": null,
"addressLine1": "1267 Vicente Dr",
"addressLine2": "Apt 155",
"state": "CA",
"city": "Sunnyvale",
 "zipCode": "94087"
 }

一旦用户进入，我想在网页上显示用户名，名字和姓氏。

//这是我的界面实现文件

 @Override
public User getByUserName(String userName) {
    User user = new User();
    String GET_USER_ID = "select user_id,first_name,last_name,user_name,email_address,phone_number,date_of_birth,gender,address_line1,address_line2,state,city,zipcode from user WHERE user_name=:userName";
    SqlParameterSource sqlParameter = new MapSqlParameterSource().addValue("userName", userName);
   // user  =(User)getNamedParameterJdbcTemplate().query(GET_USER_ID, sqlParameter, new BeanPropertyRowMapper(User.class));

  //user data sending here in the JSON format

    return   getNamedParameterJdbcTemplate().query(GET_USER_ID,sqlParameter, new ResultSetExtractor<User>() {
        @Override
        public User extractData(ResultSet resultSet) throws SQLException, DataAccessException {
            User user = new User();
            while (resultSet.next())
            {

                    user.setUserId(resultSet.getLong("user_id"));
                    user.setFirstName(resultSet.getString("first_name"));
                    user.setLastName(resultSet.getString("last_name"));
                    user.setUserName(resultSet.getString("user_name"));
                    user.setEmailAddress(resultSet.getString("email_address"));
                    user.setPhoneNumber(resultSet.getString("phone_number"));
                    user.setDateOfBirth(resultSet.getDate("date_of_birth"));
                    user.setGender(Gender.valueOf(resultSet.getString("gender")));
                    user.setAddressLine1(resultSet.getString("address_line1"));
                    user.setAddressLine2(resultSet.getString("address_line2"));
                    user.setState(resultSet.getString("state"));
                    user.setCity(resultSet.getString("city"));
                    user.setZipCode(resultSet.getString("zipcode"));

            }
            return user;
        }
    });
   // return  user;
}

//这是我的cotroller文件

@Controller
public class LoginController {

@Autowired
private LoginService loginService;
@Autowired
private UserService userService;



private boolean loggedInResult;

@RequestMapping(value = "/v1/login", method = RequestMethod.POST)
public @ResponseBody
User signIn(@RequestBody LoginRequestDto loginRequestDto,
            HttpServletRequest request,
            HttpServletResponse response) throws IOException {

    User user = null;
    String userName = loginRequestDto.getEmailAddress();

    String password = loginRequestDto.getPassword();

    loggedInResult = loginService.validateUser(userName, password);

    if (loggedInResult==true)
    {
        response.setStatus(200);

        return userService.get(userName);

    }
    else
    {
         response.sendError(403);
    }
    return user;
 }
}

//这是我的javascript文件

function Logincheck()
{

var u1 =document.getElementById("Username_loginfrm").value;
var p1=document.getElementById("Password_loginfrm").value;


var JSONObject= {
    emailAddress:u1,
    password:p1
};


$.ajax({
    type: "POST",
    url: "http://localhost:8080/shareonwheels/v1/login",
    data: JSON.stringify(JSONObject),
    contentType: "application/json",


    success: function (response) {
        alert("User has been login successfully.");

        loginSuccessRedirect();
    },
    error: function (response) {

        alert("Invalid User");

        loginFailRedirect();
        document.getElementsByName('Username_loginfrm').focus();

    }

});
}

Answer 1

您可以使用$（“＃divid”）。html（response）;

其中response是一个JavaScript变量，其中包含REST调用的响应。