Question

I am new to angular and following is my requirement, not sure how I can do it in Angular.

My Angular app will receive HTTP POST data as json from another application (we cant change that method from POST to GET)

I have to show a pre-filled form in Angular app using json data received from different apps.

I am also using springboot. I do not use any database ( so cant store data and call service from angular.

Answer 1

You need to create a post endpoint on your service that stores the data serverside somehow and then redirects to the Angular app. Then you have another endpoint on your service that the Angular app can retrieve that data from.

Angular is a client side application and cannot be the action of a post.

Answer 2

我通过使用spring-boot会话来实现这一目标。希望它对某人有帮助。

HTML代码

<form method="post" id="complainForm" action="http://localhost:8882/aalcomplaint/api/complaint/lodge-complaint" target="_blank">
  <!-- you can build your own json string as you like-->
  <input type="hidden" name="complainData" value='{"policyNumber":"1234", "firstName":"aa" , "lastName" : "mm"}' />
  <input type="submit" id="LodgeComplain" name="LodgeComplain" value="Lodge Complain"/>
</form>

弹簧启动代码

@Slf4j
@CrossOrigin(origins = "*")
@RestController
@TamAuthentication
public class ComplainsController {

  @PostMapping(value = "/aalcomplaint/api/complaint/lodge-complaint")
  public ModelAndView lodgeComplaint(@RequestBody String complainData, ModelAndView modelAndView, final HttpServletRequest request) {

    final String id = UUID.randomUUID().toString();
    try {
      final ComplaintDto complaintDto = convertRequestDataToObject(complainData);
      request.getSession().setAttribute(id, complaintDto);
    }
    catch (IOException e) {
      log.error(e.getMessage());
    }
    modelAndView.setViewName("redirect:/#/lodge-complain?id=" + id);
    return modelAndView;
  }

  @GetMapping(value = "/aalcomplaint/api/complaint/get-data/{id}")
  public ComplaintDto getData(@PathVariable String id, final HttpServletRequest request) {
    //TODO: id not null & empty check
    final ComplaintDto complaintDto = (ComplaintDto) request.getSession().getAttribute(id);
    request.getSession().removeAttribute(id);
    return complaintDto;
  }

  private ComplaintDto convertRequestDataToObject(String complainData) throws IOException {
    final ObjectMapper mapper = new ObjectMapper();
    complainData = URLDecoder.decode(complainData, "UTF-8");
    log.info("complainData > " + complainData);
    return mapper.readValue(complainData.split("=")[1], ComplaintDto.class);
  }



}

语言代码

export class LodgeComplainComponent {

  complainDto: ComplainDto;
  id : string;

  constructor(private activatedRoute: ActivatedRoute, private http: HttpClient, private refService: RefService) {
    this.complainDto = new ComplainDto();

  }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      this.id =  params['id'];
      console.log('id - ' + params['id']);        
    });

    this.refService.getData(this.id).subscribe(result => {
            this.complainDto = result;
    });
  }
}

Populate Angular form with data passed by another app

2 个答案: