javascript - 如何从 java 使用 Javascript/AJAX 调用 HTML/PHP 中的 Web 服务-6ren

javascript - 如何从 java 使用 Javascript/AJAX 调用 HTML/PHP 中的 Web 服务

转载作者：行者123 更新时间：2023-12-02 09:16:12

我在java eclipse中有简单的方法服务，使用数据库postgresql，但是，我想使用javascript或ajax调用html php中的方法？我想使用此服务将数据插入数据库并获取数据，如何在 html/php 中调用此方法？

这是我的 Controller

import java.util.Date;
import java.util.List;

import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.GetMapping;

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.RestController;
import com.bsm.payroll.model.PayrollModel;
import com.bsm.payroll.repository.PayrollRepoSitory;

@RestController
public class PayrollController {

@Autowired
PayrollRepoSitory payrollRepoSitory;

@GetMapping(value="/payroll")
@Produces(MediaType.APPLICATION_JSON)
public List<PayrollModel> getAllPayroll(){
    return payrollRepoSitory.findAll();
}


//yang dipake untuk upload file di db postgresql
@RequestMapping(path ="/coba-payroll-param", method = RequestMethod.POST)
@Produces(MediaType.APPLICATION_JSON)
String savebyparam(@RequestParam("company_id") String company_id, @RequestParam("nama_file") String nama_file) {

    PayrollModel payroll;

    payroll = new PayrollModel();
    payroll.setStatus("0");
    payroll.setNameFile(nama_file);
    payroll.setCompanyId(company_id);
    payroll.setCreationDate(new Date());

    payrollRepoSitory.save(payroll);
    return nama_file+company_id;

    }

    }

这是我的 pom.xml

     <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-rest</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.2.4</version>
    </dependency>
    <dependency>
        <groupId>javax.ws.rs</groupId>
        <artifactId>javax.ws.rs-api</artifactId>
        <version>2.0.1</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.postgresql</groupId>
        <artifactId>postgresql</artifactId>
        <scope>runtime</scope>
    </dependency>

这是我的 HTML

<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv= "X-UA-Compatible" content= "ie=edge">
<title> Belajar Dasar Ajax </title>
</head>
<body>
<h1>Tutorial Ajax</h1>
<div id="hasil"></div>
<button onclick="loadContent()">Load Content</button>

<script>
    function loadContent(){
        var xhr = new XMLHttpRequest();
        var url = "http://localhost:8181/payroll";
        xhr.onreadystatechange = function(){
            if(this.readyState == 4 && this.status ==200){
                document.getElementById("hasil").innerHTML = this.responseText;
            }
        };
        xhr.open("GET", url, true);
        xhr.send();
    }
</script>
</body>
</html>

或者你还有其他从java调用webservice到html/php的东西，因为这是我第一次使用这个，而且我没有图片来调用java webservice到html/php

最佳答案

您应该考虑修改服务器以添加 @CrossOrigin 注释，以防止浏览器阻止来自您的网络应用的请求。更多详情here in mozilla docs并针对 Spring in this spring guide .

注意。此注释还有其他选项，可以增加进一步的安全性或指示您希望基于浏览器的应用程序如何与服务器交互。

Java Rest Controller 的更新代码如下所示:

    import org.springframework.web.bind.annotation.RestController;
    import com.bsm.payroll.model.PayrollModel;
    import com.bsm.payroll.repository.PayrollRepoSitory;
    import org.springframework.web.bind.annotation.CrossOrigin;
    
    @CrossOrigin
    @RestController
    public class PayrollController {
    
    @Autowired
    PayrollRepoSitory payrollRepoSitory;

上面的代码是获取数据的一种方法，有很多工具/框架/库，但是我将使用下面的实现进行响应。

检索内容

<script>
    function loadContent(){
        var xhr = new XMLHttpRequest();
        var url = "http://localhost:8181/payroll";
        xhr.onreadystatechange = function(){
            if(this.readyState == 4 && this.status ==200){
                var dataAsString = this.responseText; //this is a string
                //your method seems to return a list of payrol items/objects
                //you may be interested in displaying each of these as such
                //you should parse the JSON (usual default) data returned from the 
                //server into an object, 
                var data = JSON.parse(dataAsString);
                //now you should have an array or payrol items.
                //Let's say that you would like to display a list of "name" s
                document.getElementById("hasil").innerHTML = '';
                for(var i=0;i<data.length;i++){
                    document.getElementById("hasil").innerHTML +='<p>'+data[i].name+'</p>' ;
                }
                
            }
        };
        xhr.open("GET", url, true);
        xhr.send();
    }
</script>

保存内容

我注意到您发布的内容对于考虑 Restful 惯例来说是很好的。在另一次迭代中，您可以考虑使用 @RequestBody see more details here 传递数据。。但是，根据您的实现，可以将数据保存到服务器的方法可能如下所示:

<script>
    function saveCobaPayrollParam(companyId, nameFile){
        var xhr = new XMLHttpRequest();
        //we will pass data using the query string
        //NB how we have a question sign (?) separating the url and the data
        //the data is represented as a set of key=value pairs and separated 
        //by an ampersand
        var url = "http://localhost:8181/coba-payroll-param?company_id="+companyId+"&nama_file="+nameFile;
        xhr.onreadystatechange = function(){
            if(this.readyState == 4 && this.status ==200){
                var dataAsString = this.responseText; //this is a string
                //you could provide additional confirmation here eg.
                alert("This operation was successful")
                
            }
        };
        //NB I have changed the request method from GET to POST
        xhr.open("POST", url, true);
        xhr.send();
    }
</script>

关于javascript - 如何从 java 使用 Javascript/AJAX 调用 HTML/PHP 中的 Web 服务，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58967202/

全站热门文章

首页

博学

6Ren·AI

商城