Infopathを使用せずにHTMLフォームからSharePointリストに入力を送信する

私はSharepointサイトを通じて http://.../testform.html と呼ばれるHTMLウェブページ上に空白のフォームを作成しました。

<form>
    <input type='text' id='name'>
    <input type='submit' id='submitdata' value='submit'>
</form>

私は入力を Test という名前のSharePointリストに送信しようとしています。

そこで、私は以下のコードを思いつき、 Script Editor Webパーツを使ってテストしましたが、うまくいきました。

  <script type="text/javascript">
  $(document).ready(function() {

      $('#submitdata').click(function() {
          var name = $('#name').val();
          var list = "Test";
          addListItem(name, list);
      });
  });

  function addListItem(name, listname) {

      var listType = "Custom List";
      var item = {'__metadata': {'type': 'SP.Data.TestListItem'},
          'Title': name
      }
      var siteUrl = "https://intelshare.intelink.gov/sites/carm"

      $.ajax({
          url: siteUrl + "/_api/web/lists/getByTitle('" + listname + "')/items",
          type: "POST",
          contentType: "application/json;odata=verbose",
          data: JSON.stringify(item),
          headers: {
              "accept": "application/json;odata=verbose",
              "X-RequestDigest": $("#__REQUESTDIGEST").val(),
          },
          success: function(data) {

              console.log("done");
          },
          error: function(err) {
              console.log(JSON.stringify(err));
          }
      });
  }
  </script>

しかし、HTMLページの Script Editor Webpart から同じコードを使用すると、以下のエラーが発生します。

このページのセキュリティ検証は無効です。   破損しています。あなたのWebブラウザの戻るボタンを使って試してみてください。   もう一度操作

ロードした

<script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./jquery.SPServices.min.js"></script>

エラーを調べてみたところ、 data.d.GetContextWebInformation.FormDigestValue を呼び出すことになりましたが、エラーが発生したためそれを組み込む方法がわかりません。私はjavaが初めてなので、正しい方向への予算が必要です。

2

5 答え

このページで答えを見つけましたご意見ありがとうございます。

ページ上でフォームダイジェストが期限切れになったためにエラーが発生したようです。

だから私はこれらの機能を使用しました

var webUrl = "https://weburl"

function getFormDigest(webUrl) {
    return $.ajax({
        url: webUrl + "/_api/contextinfo",
        method: "POST",
        headers: { "Accept": "application/json; odata=verbose" }
    });
}

function createListItem(webUrl, listName, itemProperties) {
    return getFormDigest(webUrl).then(function (data) {

        return $.ajax({
            url: webUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
            type: "POST",
            processData: false,
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(itemProperties),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": data.d.GetContextWebInformation.FormDigestValue
            }
        });
    });
}    

そして彼らをこのように呼んだ。

//Create a Task item
var taskProperties = {
    '__metadata': { 'type': 'SP.Data.TestListItem' },
    'Title': name,
};

createListItem(_spPageContextInfo.webAbsoluteUrl, 'Test', taskProperties)

.done(function (data) {
    console.log('Task has been created successfully');
})
.fail(function (error) {
    console.log(JSON.stringify(error));
});
2
追加された

これを試して ......

<div class="col-md-6">
                <div class="form-group">
                    
                    <div class="col-md-8">
                        <input name="CTName" id="CTName" type="text" class="form-control " /> 
                    </div>
            <div class="col-md-6">
                <div class="form-group">
                    
                    <div class="col-md-8">
                        <input id="CTPhone" type="text" class="form-control " /> 
                    </div>
                </div>

    <div class="row text-center mrgtop50">
        Submit
    </div>

function ItemSubmit() {
            $("#Submit").click(function() {
            debugger;
                AddItemToList(listItemEntity);                
            });
        }
        function InitialData() {
        debugger;
            context = new SP.ClientContext.get_current();
            web = context.get_web();
            context.load(web);
            context.executeQueryAsync(onRequestSuccess, onRequestFailure);
        }
        function onRequestSuccess() {
            Url = web.get_url();
            debugger;
            GetListItemEntity(Url);
        }
        function onRequestFailure(sender, args) {
            alert("Error Occured:" + args.get_message());
        }
        function GetListItemEntity(webUrl) {
            var queryUrl = webUrl + "/_api/lists/getbytitle('--ListName--')?$select=ListItemEntityTypeFullName";
            $.ajax({
                url: queryUrl,
                method: "GET",
                headers: { "Accept": "application/json;odata=verbose" },
                success: onEntitySuccess,
                error: onEntityFailure
            });
        }
        function onEntitySuccess(data) {
            listItemEntity = data.d.ListItemEntityTypeFullName;
        }
        function onEntityFailure(err) {
            alert(err.statusText);
        }
        function AddItemToList(listItemEntity) {
            //reading text box values
            debugger;
                var CTName = $("#CTName").val();
                var CTPhone = $("CTPhone").val();

            try {
                var queryUrl = Url + "/_api/lists/GetByTitle('--ListName--')/items";
                $.ajax({
                    url: queryUrl,
                    type: "POST",
                    contentType: "application/json;odata=verbose",
                    data: JSON.stringify(
                        {
                            '__metadata': {
                                'type': listItemEntity
                            },
                            'Name' : CTName,
                            'Phone': CTPhone,

                        }),
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": $("#__REQUESTDIGEST").val()
                    }, success: onQuerySuccess,
                    error: onQueryFailure
                });
            }
            catch (ex) {
                alert("Exception" + ex.message);
            }
        }
        function onQuerySuccess(data, request) {

            alert("Contract Form Submitted");
            window.location = _spPageContextInfo.webAbsoluteUrl + "/SitePages/.....";
            return false;

        }
        function onQueryFailure(error) {

        }
0
追加された
これはうまくいきませんでした。リンクをクリックしても何も起こらず、入力ボックスが更新されませんでした。私のコードはWebパーツで動作しますが、空白のHTMLページでは動作しません。
追加された 著者 dalore,
それをすべてまとめることができますか。私は混乱しています。
追加された 著者 dalore,
'ItemSubmit'は未定義です
追加された 著者 dalore,
いいえ私はそれを含めた
追加された 著者 dalore,
私はそれを考え出してそれを投稿しました...あなたの助けをありがとう
追加された 著者 dalore,
上記のコードで以下を試してください。
追加された 著者 Deer Hunter,
このリンクを忘れたのかもしれません<script src = "bootstrap.min.js"> </script> <script src = "createdjsfile"> </script>
追加された 著者 Deer Hunter,
Add this on top function ItemSubmit(), create separate JS and the code from var context to end not HTML div



   var context;                                                                                                              
    var web;                                                                                                                      
    var listItemEntity;                                                                                                           
    var ItemID;                                                                                                     
    $(document).ready(function() {                                                
                 getSPOffset();                                                                                    
    SP.SOD.excuteFunc('sp.js','sp.ClientContext',InitialDate);                                        
    ItemSubmit();                                                                                                
            }

HTMLコード用に別のascxファイルを作成し、jsファイルリンクを追加します。

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />          
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" />
link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="bootstrap.min.js"></script>
<script src="createdjsfile"></script>
0
追加された

これはascxファイルです

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />          
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" />
link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="bootstrap.min.js"></script>
<script src="createdjsfile"></script>
<div class="col-md-6">
                <div class="form-group">
                    
                    <div class="col-md-8">
                        <input name="CTName" id="CTName" type="text" class="form-control " /> 
                    </div>
            <div class="col-md-6">
                <div class="form-group">
                    
                    <div class="col-md-8">
                        <input id="CTPhone" type="text" class="form-control " /> 
                    </div>
                </div>

    <div class="row text-center mrgtop50">
        Submit
    </div>
0
追加された

this is JS file

var context;                                                                                                              
    var web;                                                                                                                      
    var listItemEntity;                                                                                                           
    var ItemID;                                                                                                     
    $(document).ready(function() {                                                
                 getSPOffset();                                                                                    
    SP.SOD.excuteFunc('sp.js','sp.ClientContext',InitialDate);                                        
    ItemSubmit();                                                                                                
            }
function ItemSubmit() {
            $("#Submit").click(function() {
            debugger;
                AddItemToList(listItemEntity);                
            });
        }
        function InitialData() {
        debugger;
            context = new SP.ClientContext.get_current();
            web = context.get_web();
            context.load(web);
            context.executeQueryAsync(onRequestSuccess, onRequestFailure);
        }
        function onRequestSuccess() {
            Url = web.get_url();
            debugger;
            GetListItemEntity(Url);
        }
        function onRequestFailure(sender, args) {
            alert("Error Occured:" + args.get_message());
        }
        function GetListItemEntity(webUrl) {
            var queryUrl = webUrl + "/_api/lists/getbytitle('--ListName--')?$select=ListItemEntityTypeFullName";
            $.ajax({
                url: queryUrl,
                method: "GET",
                headers: { "Accept": "application/json;odata=verbose" },
                success: onEntitySuccess,
                error: onEntityFailure
            });
        }
        function onEntitySuccess(data) {
            listItemEntity = data.d.ListItemEntityTypeFullName;
        }
        function onEntityFailure(err) {
            alert(err.statusText);
        }
        function AddItemToList(listItemEntity) {
            //reading text box values
            debugger;
                var CTName = $("#CTName").val();
                var CTPhone = $("CTPhone").val();

            try {
                var queryUrl = Url + "/_api/lists/GetByTitle('--ListName--')/items";
                $.ajax({
                    url: queryUrl,
                    type: "POST",
                    contentType: "application/json;odata=verbose",
                    data: JSON.stringify(
                        {
                            '__metadata': {
                                'type': listItemEntity
                            },
                            'Name' : CTName,
                            'Phone': CTPhone,

                        }),
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": $("#__REQUESTDIGEST").val()
                    }, success: onQuerySuccess,
                    error: onQueryFailure
                });
            }
            catch (ex) {
                alert("Exception" + ex.message);
            }
        }
        function onQuerySuccess(data, request) {

            alert("Contract Form Submitted");
            window.location = _spPageContextInfo.webAbsoluteUrl + "/SitePages/.....";
            return false;

        }
        function onQueryFailure(error) {

        }
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript