Блог

Главная - Вопросы по программированию - Отправка данных из HTML-формы в Restful API с использованием JavaScript

Отправка данных из HTML-формы в Restful API с использованием JavaScript

#javascript #html #forms #rest #microservices

Вопрос:

У меня есть микросервис (Restful API), и мне нужно отправить данные из другого проекта (проект шаблона HTML) в Restful API с использованием javascript, который необходимо сохранить в базе данных MySQL.

К какому выводу я пришел до сих пор, так это :

  • Данные поступают с HTML-страницы в код javascript (я проверил это из браузера, применив точки останова в коде).
  • Данные, поступающие в API, равны нулю, и они всегда возвращают «Ошибку при регистрации», что еще является частью restful API
  • Я думаю, что есть какая-то незначительная проблема, из-за которой я потратил несколько дней на ее решение, но до сих пор не мог этого сделать. Если ваша помощь поможет решить эту проблему, я был бы очень благодарен.

Мой код HTML-формы выглядит так:

 lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta charset="ISO-8859-1"gt; lt;titlegt;Regsitration Pagelt;/titlegt;  lt;!--lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" /gt;  --gt;  lt;style type="text/css"gt;  body,td,th{  color: #000000;  }    body{  background-color: #F0F0F0;  }    .style1  {  font-family: arial;  font-size: 14px;  padding: 12px;  line-height: 25px;  border-radius: 4px;  text-decoration: none;    }    .style2  {  font-family: arial;  font-size: 17px;  padding: 12px;  line-height: 25px;  border-radius: 4px;  text-decoration: none;    }     lt;/stylegt;  lt;script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"gt;lt;/scriptgt;  lt;script src="/js/IntermediateBtwHTMLAndRest.js"gt;lt;/scriptgt;  lt;/headgt;  lt;bodygt;  lt;div class="container"gt;  lt;table width="100%" height="100%" border="0" cellpadding="0" align="center"gt;  lt;trgt;  lt;td align="center" valign="middle"gt;  lt;table class="table-bordered" width="350" border="0" cellpadding="3"cellspacing="3" bgcolor="#ffffff"gt;    lt;form action="#" name="registerForm" id="registerForm" method="post"gt;      lt;trgt;  lt;td height="25" colspan="2" align="left" valign="middle" bgcolor="#ffffff" class="style2"gt;  lt;div align="center"gt;  lt;stronggt;User Registrationlt;/stronggt;  lt;/divgt;    lt;/tdgt;  lt;/trgt;   lt;trgt;  lt;tdgt;Usernamelt;/tdgt;  lt;tdgt;    lt;input type="text" name="usernm" id="usernm" autofocus="autofocus" class="form-control" /gt;  lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;tdgt;Create Passwordlt;/tdgt;  lt;tdgt;lt;input type="password" name="pwd" id="pwd" class="form-control" /gt;lt;/tdgt;  lt;/trgt;    lt;trgt;  lt;tdgt;Addresslt;/tdgt;  lt;tdgt;lt;input type="text" name="address" id="address" class="form-control" /gt;lt;/tdgt;  lt;/trgt;    lt;trgt;  lt;tdgt;Phonelt;/tdgt;  lt;tdgt;lt;input type="text" name="phone" id="phone" class="form-control" /gt;lt;/tdgt;  lt;/trgt;      lt;trgt;  lt;td colspan="2"gt;  lt;!--lt;button class="btn btn-info" onclick="restCallToRegister()" align="right"gt;  Register  lt;/buttongt;  --gt;  lt;button class="btn btn-info" type="submit" onclick="restCallToRegister()" align="right"gt;  Register  lt;/buttongt;      lt;!-- lt;input value="Submit form" type="submit" align="right"gt;  Register  lt;/inputgt;  --gt;  lt;/tdgt;  lt;/trgt;    lt;/formgt;  lt;/tablegt;   lt;/tdgt;   lt;/trgt;   lt;/tablegt;   lt;/divgt;   lt;/bodygt; lt;/htmlgt;

Код Javascipt-это:

 function restCallToRegister() {    $('#registerForm').submit(function(e)   {  console.log("Reached Here!!!!!!!")  e.preventDefault();   var dataObj = new Object();  dataObj.email = $("#usernm").val();  dataObj.password = $("#pwd").val();  dataObj.address = $("#address").val();  dataObj.phone = $("#phone").val();    var userJson=JSON.stringify(jQuery($('#registerForm').serializeArray()));    $.ajax({  url : 'http://localhost:8089/register',  dataType : 'json',  contentType : 'application/json; charset=UTF-8',  type : 'POST',   data: userJson,  beforeSend : function(){  alert("before");  },  complete : function(){  alert("complete");   },  success : function(data) {  alert("success" data.responseText);  },  error : function(data) {  alert("error" data.responseText);  }    });     }); }

The restfull API code in another project is:

 @RequestMapping(method = RequestMethod.POST,value = "/register")  public String registerUser(@ModelAttribute("usersTbl") UserModel ums)  {  //System.out.println("OOOOOO=" ums.getUid() ums.getPwd());    System.out.println("Entered in backend Controller...........");  System.out.println("UMS________" ums);  System.out.println("PPPPPP=" ums.getUid() ums.getUsernm() ums.getPwd() ums.getAddress() ums.getPhone());    String savedOrNot=userService.register(ums);  if(savedOrNot.equals("Saved"))  {  //go to next page  System.out.println("Done");  return "You are registered. Go To Login Page to login";  }  else  {  System.out.println("Not Done");  return "Error while registering";  }        }
Метки: